iPhone上的响应网站 – 不需要的白色空间上从风景旋转到肖像
我正在创build一个响应式网站，刚刚在iPhone上查看时，我的内容页面中发现了一个奇怪的行为。 在纵向模式下加载时可以正确缩放，也可以在旋转到横向时缩放。 但是，当旋转回肖像时，页面似乎向左移动，或者不能正确缩放，而右侧则有一段白色空白。 因为用户可以向左滑动页面，所以这个空白区域似乎也是在第一次加载时呈现的
更进一步，而不是复杂的解释，这里是一个示例页面的链接发生此行为 。 看看iPhone，然后看看没有这个问题的主页 。
如果你需要进一步了解，只要我知道:)
修复！ 这个问题是来自一个特定的分支 – find它，这是一个删除不同的因素，直到问题消失的过程。
为了解决这个问题，我需要添加overflow-x: hidden到那个div，然后把它整理出来！ 希望这对其他有类似问题的人有用。
我有同样的问题，我通过设置：
html, body { width:100%; overflow:hidden; }
当任何部门的宽度大于iPAD的屏幕宽度时，会发生此问题。
在我的情况下，一些分区的大小是1000px，所以我只是去了width:auto和它的工作。 overflow-x:hidden也做同样的事情，但不是一个首选的方式。
我没有iphone来testing这个，但我遇到了类似的东西，我曾经创build的网站。 在我的情况下，它是因为有一个在移动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”可以解决问题的一部分，但是却会把这个滚动条按照奇怪的行为进行排列（如Jason所说）。
有时候，最难的部分是发现是什么原因造成的问题。 在我的情况下，几个小时后，如果发现问题是在Twitter的Bootstrap：
如果您使用Twitter的Bootstrap与“控制组”区域的表单，问题可能在那里。 在我的情况下，我解决了这个问题：
.control-group .controls { overflow-x: hidden }
现在右边的空白处已经没有了:)
我想添加到Navneet Kumar的解决scheme，因为它为我工作。 任何div标签样式的宽度= 100％不能也有左或右填充。 移动浏览器（我注意到iPhone和Android设备上的问题）将div解释为宽度大于100％，从而在右侧创build额外的空间。 （我知道这是固定的宽度，但不是百分比宽度。）相反，使用宽度=自动连同填充。
我知道这个主题已经打开了一段时间，但是我遇到了类似的情况，发现这是因为我有一个元素，它具有以下属性right: -999999px; position: absolute; right: -999999px; position: absolute; 隐藏在屏幕之外。
将上面的内容更改为left: -999999px; position: absolute; left: -999999px; position: absolute; 解决了同样的问题OP（右边的白色屏幕和右边的刷卡能力）。
我正在使用Bootstrap 3.3。 我尝试了所有这些解决scheme，没有任何工作。 然后，我将我的< div class =“container” >更改为< div class =“container-fluid” > 。 这解决了这个问题。
我尝试了所有在这里build议的，没有任何工作。 然后我已经确定它与页面的比例连接。 于是我在我的主题文件夹中添加了<meta name="viewport" content="width=device-width, initial-scale=1.0"> header.php，这是个问题。
似乎结果是不同的情况下，但在全站范围内变化
html，body {width：100％; 的x溢出：隐藏; }
似乎已经为我工作了！
解决了
自从安装protostar joomla模板3.X，并开始在模块K2中添加内容，我注意到恼人的滚动与右侧的空白，特别是在iPhone中可见。
给Eva Marie Rasmussen一个正确的部分答案，添加到文件template.css中的body标签中：
width: auto; overflow-x: hidden;
但是这个解决scheme只是部分的。 search引起这个问题的div类或标签，一旦检测到，在文件templete.css中添加相同的值：
width: auto; overflow-x: hidden;
在我的情况下，添加到类“span”这两行，最后看起来像这样：
[Class * = "span"] { float: left; min-height: 1px; margin-left: 20px; width: auto; overflow-x: hidden;
现在它正在工作
