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

问题描述

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

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屋！