提问者:小点点

网站在iPhone屏幕右侧显示一个空白


我在http://eiglaw.com上遇到了一个问题--在iPhone的屏幕右侧显示了一个大约25px宽的空白/边框。我研究了stackoverflow上的问题,这些帖子是相关的,但当我尝试提供的各种解决方案时,我都无法修复该问题:

iPhone上的响应式网站-从景观到肖像旋转时不需要的空白

在iPhone Safari中呈现右白色边距的网站正文背景

缩放时页眉右侧有空白

我在iPad上也遇到过类似的问题,但可以通过以下媒体查询来修复它:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
/*and (orientation : landscape)*/ {
html,
body {
width:1000px; 
}
}

我尝试了各种针对html和body元素的媒体查询,但没有成功。我已经查看了整个CSS文件的背景图像,边距,填充,溢出等问题,但真的被难住了。有人有什么建议吗?

多谢!


共2个答案

匿名用户

问题出在您的菜单(为什么是h3,顺便说一句?)上,由于widty:100%+一些填充,该菜单似乎比视口要宽。

尝试为该元素设置box-sizing:border-box;

匿名用户

这对Tigran很管用。

我刚刚在样式表的顶部添加了一个全局类:

null

div {
  box-sizing: border-box;
  }