当从横向转为竖向设备方向时，x轴溢出。

Question

正如文章标题所述，当我在所有Webkit浏览器中将设备方向从横向改为纵向时，x轴上出现了溢出问题。我只尝试过iOS和Android驱动的设备[iPhone 4、4S和5，三星Galaxy Nexus、三星Galaxy II和III这些手机在使用Google Chrome或Safari时出现了问题]。

我已经将以下标签放置在网页头部：

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

我还需要说明的是，我正在使用媒体查询：

@media (min-width: 1200px)

...

@media (min-width: 980px)

...

@media (min-width: 768px) and (max-width: 979px)

...

@media (max-width: 767px)

...

@media (max-width: 480px)

...

所以我想知道是否有人遇到过这个问题，如果您有解决方案，请分享一下，因为这真的很烦人。

更准确地说，我有一个移动web应用程序，它是建立在Twitter Bootstrap框架之上的，并且只能在移动设备和平板电脑上查看。显然，我需要使用媒体查询来根据您浏览Web应用程序的屏幕大小更改布局。问题是，当您在纵向模式下打开页面时，将设备方向更改为横向，然后再次更改为纵向时，内容将比设备的宽度要大，即使您第一次以纵向模式降落在web应用程序页面上，布局的宽度与设备的屏幕宽度相同，只有在旋转到横向并返回纵向后才会出现这种情况。希望这个解释足够清楚明了 (：

- Roland

Answer 1

我正在制作一个网页，遇到了同样的错误。在最小化页面后，我最终追踪到了一个占位符：

<input placeholder="foo">

当输入框的宽度在横屏模式下大于纵向宽度时，就会出现错误。

input {
  width 95%;
}

如果你看到的 bug 也是由于 placeholder 引起的，对 input 的父元素设置 overflow-x: hidden 就可以解决问题。 iOS 6 中文本输入框占位符在横屏和竖屏之间的处理方法 上有更多讨论。

- Esseb

Answer 2

你可以尝试一下

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

编辑
好的，我通常使用带有媒体查询的meta名称，如下所示，结合方向，没有遇到问题

@media screen and (min-width: 480px) and (orientation:portrait) {

}

- Santiago Rebella

---

这并没有提供问题的答案。如果您想对作者进行批评或请求澄清，请在他们的帖子下留言。 - Alexis Pigeon

@AlexisPigeon 我以为"user-scalable=no"就是答案 :( - Santiago Rebella

我认为这与MQ无关，我已经仔细检查了我的代码和MQ之间的任何差异，并没有发现任何问题(:虽然我发现在一些页面上，如果我将overflow-x: hidden;添加到包含内容的容器中（没有页眉或页脚），布局将按预期运行，因此X轴上不再溢出(:我不知道为什么，但我正在尝试使用Electric Plum for VS调试问题...我希望我能追踪到这个问题(: - Roland