移动Safari视口 - 如何防止水平滚动？

Question

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

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

在我的iPhone上加载页面时，它看起来似乎还好：

但我可以横向滚动，这样看起来像这样（这是我能到达的最右边）：

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

我正在尝试找出如何完全禁用此页面的水平滚动。是否有可能有某些页面元素推出内容？即使已正确设置视口，我也不希望发生这种情况，但我在试图寻找解决方法。

- Aaron Vegh

Answer 1

我有一个页面元素是否会影响到内容的显示？

是的，确实是这种情况。视口设置仅定义可见视口区域，但不处理侧向滚动。因此，为避免出现此问题，请在包含内容的元素上设置overflow：hidden，否则请避免元素溢出。

NB：其他移动浏览器也支持视口meta标签一段时间了，因此您也需要在这些浏览器中进行测试。

- andreasbovens

---

看来问题原来就是这么简单。虽然还不确定是什么推出了它，但是在主显示元素上使用溢出属性解决了这个问题。谢谢！ - Aaron Vegh

感谢您的回答。对我来说，导致宽度过大的是硬编码的“______”注释。 - Danger14

NB代表什么？ - Kevin Wheeler

NB 是拉丁语的缩写，意思是“请注意”，基本上意味着接下来的内容是一些好的或有用的额外信息。 - user2840467

Answer 2

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

- HaL

---

这似乎在 Android 设备上不起作用。我有一个页面，overflow-x 设置为隐藏，但仍然可以用鼠标滚动。 - Jordan Reiter

这个问题是关于移动Safari的 :) 对于Android浏览器，我成功地使用了这个答案。 - HaL

这也会破坏垂直滚动，使滚动变得非常缓慢。 - Acosta

这个可以！我没有溢出的块或标签。我将其缩小到只有一个带有大量文本的<label>，但它包装得很好！但仍然会水平滚动并显示死白空间。 - Chloe

Answer 3

很抱歉来晚了，但我遇到了一个类似的问题，即在iPhone 5上出现了水平滚动，网站的宽度实际上显示为双倍，右半部分完全为空。

实际上，我只需要将视口元标记从以下内容更改：

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

to:

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

添加 'initial-scale' 属性将其锁定，使其按预期只能在垂直方向上滚动。

- Codecraft

Answer 4

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

body div {overflow: hidden ;}  @ media queries 

- Jose Miguel

---

我使用了 body > div {overflow: hidden; } 来防止不必要的裁剪。 - Leftium

Answer 5

可以尝试这个变体：

html, body{
  overflow-x: hidden;
}

- Serj