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; 

现在它正在工作