iPhone上的响应式网站 - 从景观到肖像旋转的不需要的白色空间

Question

我正在创建一个响应式网站,并且刚刚注意到在iPhone上查看时我的内容页面中出现了一种奇怪的行为.在纵向模式下加载时,以及旋转到横向时,它可以正确缩放.然而,当旋转回到肖像时,页面似乎向左移动,或者没有正确缩放,并且在右侧有一条白色空间.当用户可以向左滑动页面时,这个空白区域似乎也在第一次加载时出现

这不是使解释进一步复杂化,而是指向发生此行为的示例页面的链接.看看iPhone,然后看一下没有这个问题的主页.

如果你需要进一步了解,请知道:)

Answer 1

固定它!问题来自一个特定的div - 发现它,这是一个删除不同元素的过程,直到问题消失.

要修复它,我需要添加overflow-x: hidden到该div并将其排序!希望这对有类似问题的其他人有用.

Answer 2

我有同样的问题,我通过设置修复它:

html, body { width:100%;  overflow:hidden; }

Answer 3

当任何分区的宽度大于iPAD屏幕的宽度时,会发生此问题.

在我的情况下,一些部门的大小为1000px,所以我只是去了width:auto,它的工作原理. overflow-x:hidden也做同样的事情,但不是首选方式.