Mobile Safari Viewport - 防止水平滚动？

Question

我正在尝试为移动Safari配置视口.使用视口元标记,我试图确保没有缩放,并且您不能水平滚动视图.这是我正在使用的元标记:

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

在我加载页面的iPhone上,看起来似乎没问题:

但我可以横向滚动,所以它看起来像这样(这是我可以去的最右边:

当我将其摆放到横向视图中时,页面会按预期呈现,锁定水平滚动位置.

我正在试图弄清楚如何使这个页面根本不能水平滚动.是否有可能我有一些页面元素推出内容？我甚至不希望有一个正确的视口集可能,但我在这里抓住吸管.

Answer 1

是否有可能我有一些页面元素推出内容？

是的,情况确实如此.视口设置仅定义可见视口区域,但不处理关闭侧向平移.

因此,为了避免这种情况发生,请设置一个溢出:隐藏在包含内容的元素上,否则,避免元素溢出.

注意:其他移动浏览器也支持视口元标记一段时间,因此您也需要在这些浏览器中进行测试.

Answer 2

body { overflow-x: hidden; } 也有效.

Answer 3

迟到了这里的聚会,但我遇到了一个类似的问题,我在iPhone 5上横向滚动,该网站有效地显示为宽度的两倍,右半部分完全为空.

实际上,我只需要更改viewport元标记:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />

至:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

添加'initial-scale'会将其锁定,以便它只按预期垂直滚动.

Answer 4

body div {overflow:hidden;} @ media queries

.这将阻止任何元素推出内容.