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' />

添加＆＃39;初始比例＆＃39;将其锁定，使其仅按预期垂直滚动。

Answer 4

body div {overflow：hidden;} @ media queries

。这将阻止任何元素推送内容。

Answer 5

不知道它是否仅仅是我或者发布的某些代码是否输入错误，但是：

应该这个

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

不是这样读的

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

所以内容只列出一次，因为代码末尾没有“关闭”.....

Answer 6

尝试这个变体

html, body{ overflow-x: hidden; }