html - 网站在 iPhone 的屏幕右侧显示空白

Question

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

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

我在 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%，它看起来比视口(viewport)更宽+ 一些填充。

尝试设置一个 box-sizing: border-box;到那个元素。