将设备方向从横向更改为纵向时在 x 轴上溢出

Question

正如帖子的标题所说，在所有 Webkit 浏览器中将设备方向从横向更改为纵向时，我遇到了 x 轴溢出的问题，我只尝试过 iOS 和 Android 驱动的设备 [iPhone 4、4S 和 5 、Samsung Galaxy Nexus、Samsung 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)

...

所以我想知道是否有人遇到过这个问题，以及你是否有解决方案，因为它真的很烦人。

更准确地说，我有一个基于 twitter 引导框架的移动 Web 应用程序，它也只能在移动设备和平板电脑上查看。因此，显然我需要使用媒体查询来根据您正在查看 Web 应用程序的屏幕大小更改布局。我遇到的问题是，当您在纵向模式下的页面上时，您会将设备方向更改为横向，然后再返回纵向，即使您第一次登陆，内容现在也会大于设备的宽度在纵向模式下的 Web 应用程序页面上，布局的宽度与设备屏幕宽度相同，因此只有在您转向横向并返回纵向后，我才会明白这一点。我希望这是一个足够好的解释（：

Answer 1

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

<input placeholder="foo">

如果在横向模式下输入的宽度大于纵向宽度，则会出现该错误：

input {
  width 95%;
}

如果您看到的错误也是由占位符引起的，一个简单的 overflow-x: hidden 在输入的父元素上对我来说是一个修复。

Placeholder attribute on text input with iOS 6 from landscape to portrait 上有更多关于工作的讨论

Answer 2

你可以试试

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

编辑
好的，我通常使用带有媒体查询的元名称没有这个问题，如下面的结合方向

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

}