Question

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

我在iPad上遇到了类似的问题，但是能够使用此媒体查询进行修复：

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

我尝试过针对html和body元素的各种媒体查询而没有运气。我已经查看了整个CSS文件中的背景图像，边距，填充，溢出等问题，但我真的很难过。那里有人有什么建议吗？

非常感谢！

Answer 1

麻烦在于你的<h3 class="menu-toggle">Menu</h3>（为什么是h3，顺便说一下？），由于width: 100% +有些填充，它看起来比视口宽。

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

Answer 2

这对Tigran有用。

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

＆＃13;

div {
  box-sizing: border-box;
  }

＆＃13;

干杯！

Answer 3

使用以下样式：

body{
  overflow-x: hidden !important;
}

这将消除屏幕两侧的溢出现象，即屏幕上多余的空白

Answer 4

试试这个

iPhone 5 - 风景

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { }

iPhone 5 - 肖像

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { }

iPhone 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }

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

4 个答案: