移动 Safari 视口 - 防止水平滚动？答案

【问题标题】：Mobile Safari Viewport - Preventing Horizontal Scrolling?移动 Safari 视口 - 防止水平滚动？
【发布时间】：2011-04-04 19:43:36
【问题描述】：

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

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

在我的 iPhone 上，当我加载页面时，它看起来还不错：

但是我可以水平滚动，所以它看起来像这样（这是我能走到的最右边：

当我将它切换到横向视图时，页面按预期呈现，锁定水平滚动位置。

我正在尝试弄清楚如何使此页面根本不水平滚动。是否有可能我有一些页面元素将内容推出？我什至不希望通过正确的视口设置来实现这一点，但我在这里抓住了稻草。

【问题讨论】：

【解决方案1】：

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

是的，确实如此。视口设置仅定义可见视口区域，但不处理关闭横向平移。

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

注意：其他移动浏览器也支持 viewport 元标记已经有一段时间了，因此您也需要在这些浏览器中进行测试。

【讨论】：

【解决方案2】：

body { overflow-x: hidden; } 也可以。

【讨论】：

【解决方案3】：

在这里聚会迟到了，但我刚刚遇到了类似的问题，我在 iPhone 5 上水平滚动时，网站实际上显示为宽度的两倍，而右手边完全是空的。

其实我只需要从以下位置更改视口元标记：

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

添加“初始比例”将其锁定，使其仅按预期垂直滚动。

【讨论】：

【解决方案4】：

body div {overflow: hidden ;} @媒体查询

。这将防止任何元素推出内容。

【讨论】：

【解决方案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' />

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

【讨论】：

【解决方案6】：

试试这个变种

html, body{ overflow-x: hidden; }

【讨论】：