Mobile Safari Viewport - 防止水平滚动？
我正在尝试为移动 Safari 配置视口。使用视口元标记，我试图确保没有缩放，并且不能水平滚动视图。这是我正在使用的元标记：
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
在我的 iPhone 上，当我加载页面时，看起来不错：
但我可以水平滚动，使其看起来像这样（这是我能到达的最右边的位置：
当我将其切换到横向视图时，页面按预期呈现，锁定水平滚动位置，
我试图弄清楚如何使该页面根本不水平滚动。是否有可能推动一些页面元素。我什至不希望通过正确的视口设置来实现这一点，但我在这里抓住了救命稻草。
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" />
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
来晚了，但我刚刚遇到了类似的问题，我在 iPhone 5 上水平滚动，该网站实际上显示为两倍的宽度，而右手半边完全是空的。
事实上，我只需要将视口元标记从： 更改
为：
添加“初始比例”将其锁定，以便它仅按预期垂直滚动。
Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.
In fact, I just needed to change the viewport meta tag from:
to:
Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.
这将防止任何元素将内容推出：
This will prevent any elements pushing content out:
尝试这个变体：
Try this variant:
是的，确实是这样。视口设置仅定义可见视口区域，但不处理关闭横向平移。
因此，为了避免这种情况发生，请在包含内容的元素上设置溢出：隐藏，否则避免元素溢出。
注意：其他移动浏览器也支持视口元标记一段时间了，因此您也需要在这些浏览器中进行测试。
Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.
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.
body { 溢出-x: 隐藏; }也有效。body { overflow-x: hidden; }also works.