我正在创建一个响应式网站，刚刚注意到在 iPhone 上查看我的内容页面时出现奇怪的行为。当以纵向模式加载时以及旋转到横向模式时，它都能正确缩放。但是，当旋转回纵向时，页面似乎向左移动，或者无法正确缩放，并且右侧下方有一条空白。当用户可以向左滑动页面时，该空白区域似乎也出现在首次纵向加载时
这里没有使解释进一步复杂化，而是指向发生此行为的示例页面的链接。用 iPhone 看看，然后看看主页没有这个问题。
如果您需要进一步了解任何内容，只有我知道:)
修好了！该问题来自一个特定的 div - 要找到它，需要删除不同的元素，直到问题消失。
为了解决这个问题，我需要将
overflow-x: hidden我遇到了同样的问题，我通过设置修复了它：
html, body { width:100%; overflow:hidden; }
当任何分区的宽度大于iPAD屏幕的宽度时，就会出现此问题。
就我而言，某些分区的大小为 1000px，所以我只选择了
width:autooverflow-x:hidden我没有 iPhone 来测试这个，但我遇到过与我过去创建的网站类似的东西。就我而言，这是因为 safari 手机中存在一个错误，从港口到陆地时，秤会出现混乱。
以下代码为我修复了它（现在不记得我从哪里得到它）
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
使用“overflow-x：hidden”解决了部分问题，但会破坏滚动，表现出奇怪的行为（正如杰森所说）。
有时，最困难的部分是找出导致问题的原因。就我而言，几个小时后，如果发现问题出在 Twitter 的 Bootstrap 中：
如果您使用 Twitter 的 Bootstrap 以及表单的“控制组”区域，则可能存在问题。就我而言，我解决了这个问题：
.control-group .controls {
overflow-x: hidden
}
现在右侧的空白消失了:)
我想添加 Navneet Kumar 的解决方案，因为它对我有用。任何宽度为 100% 的 div 标签都不能有左或右内边距。移动浏览器（我注意到 iPhone 和 Android 设备上的问题）将 div 解释为宽度大于 100%，从而在右侧创建了额外的空间。 （我知道关于固定宽度，但不知道百分比宽度。）相反，将 width=auto 与填充结合使用。
我知道这个主题打开已经有一段时间了，但我遇到了类似的情况，发现这是因为我有一个具有以下属性的元素
right: -999999px; position: absolute;将上面的内容更改为
left: -999999px; position: absolute;我正在使用 Bootstrap 3.3。我尝试了所有这些解决方案，但没有任何效果。然后，我将遇到问题的部分中的
<><>我尝试了这里建议的所有方法，但没有任何效果。然后我发现它与页面的比例有关。然后我将
<meta name="viewport" content="width=device-width, initial-scale=1.0">似乎结果因不同情况而有所不同，但在整个站点范围内
html, 正文 { 宽度:100%; x-溢出：隐藏； }
似乎对我有用！
已修复！ 有类似的问题。通过将宽度设置为当前设备宽度来修复它。
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
如果您遇到不同但类似的问题，因为在横向模式下左右边缘总是有空白，
确保您了解“安全区域”。 IE iPhone 不会在边缘显示网站，因为摄像头可能位于网站前面而不是屏幕前面。尝试将
viewport-fit=cover<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">已解决
自从安装了 protostar joomla template 3.X 并开始在模块 K2 中添加内容后，我注意到右侧有一个空白的烦人的滚动条，尤其是在 iPhone 中。
Eva Marie Rasmussen 给出了正确的部分答案，将这些值添加到文件 template.css 中的 body 标记中：
width: auto;
overflow-x: hidden;
但这个解决方案只是部分的。 搜索导致此问题的 div 类或标签，一旦检测到，请在文件 templatete.css 中向该类添加相同的值：
width: auto;
overflow-x: hidden;
在我的例子中，将这两行添加到“span”类中，最终看起来像这样：
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
现在可以使用了¡¡