移动 Safari 视口 - 防止水平滚动? [英] Mobile Safari Viewport - Preventing Horizontal Scrolling?

问题描述

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

I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using:

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

在我的 iPhone 上加载页面时，看起来不错:

On my iPhone when I load the page, it seems to look okay:

但我可以水平滚动，所以它看起来像这样(这是我能去的最右边:

But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:

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

When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.

我想弄清楚如何让这个页面根本不水平滚动.是否有可能我有一些页面元素将内容推出?我什至不希望通过正确的视口集实现这一点，但我在这里抓住了稻草.

I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.

推荐答案

是否有一些页面元素将内容推出?

Is it possible that I've got some page element pushing the content out?

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

Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.

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

So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.

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

NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.

这篇关于移动 Safari 视口 - 防止水平滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！