我正在创建一个响应式网站，并且刚刚注意到在 iPhone 上查看我的内容页面时出现了奇怪的行为。在纵向模式下加载时，它可以正确缩放，并且在旋转到横向时也可以正确缩放。但是，当旋转回纵向时，页面似乎向左移动，或者无法正确缩放，并且在右侧下方有一条空白区域。当用户可以向左滑动页面时，这个空白似乎也出现在第一次纵向加载时
这里没有使解释进一步复杂化，而是指向发生此行为的示例页面的链接。在 iPhone 上查看，然后查看没有此问题的主页。
如果您需要进一步了解，只有我知道 :)
问问题
54601 次
12 回答
50
修复！问题来自一个特定的 div - 要找到它，这是一个删除不同元素直到问题消失的过程。
要修复它，我需要添加overflow-x: hidden到该 div 并对其进行排序！希望这对其他有类似问题的人有用。
于 2011-11-29T02:17:19.600 回答
45
我有同样的问题，我通过设置修复它：
html, body { width:100%; overflow:hidden; }
于 2013-02-27T14:23:41.137 回答
10
当任何分区的宽度大于 iPAD 屏幕的宽度时，就会出现此问题。
在我的情况下，一些分区的大小为 1000 像素，所以我只是去了width:auto，它可以工作。 overflow-x:hidden也做同样的事情，但不是首选方式。
于 2012-04-24T13:26:56.860 回答
4
我没有 iphone 来测试这个，但我遇到了与我过去创建的网站类似的东西。就我而言，这是因为 safari mobile 中存在一个错误，在从港口到陆地时会影响规模。
以下代码为我修复了它（现在不记得我从哪里得到它）
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);
}
}
于 2011-11-22T15:09:27.283 回答
4
使用“overflow-x：hidden”解决了部分问题，但会拧紧滚动条，表现出奇怪的行为（正如 Jason 所说）。
有时，最难的部分是发现导致问题的原因。就我而言，几个小时后，如果发现问题出在 Twitter 的 Bootstrap 中：
如果您在表单中使用带有“控制组”区域的 Twitter 引导程序，那么问题可能就在那里。在我的情况下，我解决了这个问题：
.control-group .controls {
overflow-x: hidden
}
现在右边的空白已经消失了:)
于 2013-02-17T04:14:53.447 回答
0
我想添加到 Navneet Kumar 的解决方案中，因为它对我有用。任何宽度=100% 样式的 div 标签也不能有左或右填充。移动浏览器（我注意到 iPhone 和 Android 设备上的问题）将 div 解释为宽度大于 100%，从而在右侧创建了额外的空间。（关于固定宽度，我知道这一点，但不知道百分比宽度。）相反，将 width=auto 与填充一起使用。
于 2013-01-17T23:20:57.553 回答
0
我知道这个话题打开已经有一段时间了，但我遇到了类似的情况，发现这是因为我有一个元素，它在right: -999999px; position: absolute;屏幕外隐藏了以下属性。
更改上述内容以left: -999999px; position: absolute;解决 OP 遇到的相同问题（右侧的白屏和向右滑动的能力）。
于 2014-11-06T10:29:15.010 回答
0
我正在使用引导程序 3.3。我尝试了所有这些解决方案，但没有任何效果。然后，我在遇到问题的部分将<div class="container">更改为<div class="container-fluid" 。>这解决了问题。
于 2014-11-12T05:38:55.347 回答
0
我尝试了这里建议的所有方法，没有任何效果。然后我意识到它与页面比例有关。然后我<meta name="viewport" content="width=device-width, initial-scale=1.0">在我的主主题文件夹中添加了 header.php，它是固定的问题。
于 2016-02-19T01:30:28.553 回答
0
似乎结果因不同情况而异，但在整个站点范围内
html, body { 宽度:100%; x-溢出：隐藏；}
似乎对我有用！
于 2016-03-10T14:33:33.170 回答
0
固定的！有类似的问题。通过将宽度设置为当前设备宽度来修复它。
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
于 2018-03-27T13:25:29.883 回答
-1
解决了
自从安装 protostar joomla 模板 3.X 并开始在模块 K2 中添加内容后，我注意到右侧有一个空白区域的烦人滚动，尤其是在 iphone 中可见。
为 Eva Marie Rasmussen 提供了正确的部分答案，将这些值添加到文件 template.css 的 body 标记中：
width: auto;
overflow-x: hidden;
但这个解决方案只是部分的。搜索导致此问题的 div 类或标签，一旦检测到，将相同的值添加到文件 Templete.css 中的该类：
width: auto;
overflow-x: hidden;
在我的例子中，将这两行添加到“span”类中，最终看起来像这样：
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
它现在正在工作......
于 2016-02-10T19:26:18.367 回答