5

I am having a problem on http://eiglaw.com -- an approximately 25px wide white space/border is showing on the right side of the screen on iPhone. I researched the problem on stackoverflow and these posts are relevant but when I tried the various solutions offered I have not been able to fix the problem:

Responsive website on iPhone - unwanted white space on rotate from landscape to portrait

Website body background rendering a right white margin in iPhone Safari

White space on right side of header on zoom

I had a similar problem on iPad but was able to fix it with this media query:

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

I have tried various media queries targeting the html and body elements with no luck. I have looked through the entire CSS file for problems with background images, margins, padding, overflows, etc., but am really stumped. Does anyone out there have any suggestions?

Many thanks!

4

5 回答 5

6

问题出在你的（为什么是h3，顺便说一句？），因为有一些填充<h3 class="menu-toggle">Menu</h3>，它似乎比视口更宽。width: 100%

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

于 2013-09-22T19:44:49.903 回答
1

这对蒂格兰很有帮助。

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

div {
  box-sizing: border-box;
  }

干杯!

于 2015-08-28T03:57:01.547 回答
0

使用以下样式：

body{
  overflow-x: hidden !important;
}

这将消除屏幕两侧的溢出，即屏幕上的额外空白

于 2020-06-14T06:52:20.367 回答
0

iOS是垃圾，找到解决为什么一半屏幕变白并且您不断滚动进入它的唯一方法显然是成为一个该死的程序员。

于 2022-01-15T01:25:58.863 回答
-6

尝试这个

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) { }
于 2013-09-22T19:39:06.300 回答