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

Question

我在 http://eiglaw.com 上遇到问题——iPhone 屏幕右侧显示大约 25 像素宽的空白/边框。我在 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 文件，寻找背景图像、边距、填充、溢出等方面的问题，但我真的很困惑。有人有什么建议吗？

非常感谢！

原文由 Greg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Tigran Petrossian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用以下样式：

 body{
  overflow-x: hidden !important;
}

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

原文由 DINESH MANIKANTHA 发布，翻译遵循 CC BY-SA 4.0 许可协议