网站在iPhone屏幕右侧显示一个空白区域 [英] Website is displaying a white space on right side of screen in iPhone

问题描述

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

缩放标题右侧的空白区域

我在iPad上遇到了类似的问题，但可以通过此媒体查询来修复它：

  @media only screen 
和（min-device-width：768px）
和（max-device-width：1024 px）
 / *和（orientation：landscape）* / {
 html，
 body {
 width：1000px; 
} 
} 
  

我尝试了各种针对html和body的媒体查询没有运气的元素。我已经浏览了整个CSS文件，以了解背景图像，边距，填充，溢出等问题，但真的很难。有没有人有任何建议？

非常感谢！

解决方案

问题出在您的< h3 class =menu-toggle>菜单< / h3> （为什么是h3，btw？），这似乎比一个视口，因为有 width：100％ +一些填充。

尝试设置方块大小：边框 - > 到该元素。

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!

解决方案

The trouble is in your <h3 class="menu-toggle">Menu</h3> (why h3, btw?), which appears to be wider than a viewport because of having width: 100% + some padding.

Try setting a box-sizing: border-box; to that element.

这篇关于网站在iPhone屏幕右侧显示一个空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！