3

因此，正如帖子的标题所说，在所有 Webkit 浏览器中将设备方向从横向更改为纵向时，我遇到 x 轴溢出问题，我只尝试过 iOS 和 Android 驱动的设备 [iPhone 4、4S 和 5，三星 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 应用程序页面上，布局的宽度与设备屏幕宽度相同，因此只有在您转向横向并返回纵向后，我才会明白这一点。我希望这是一个足够好的解释（：

4

2 回答 2

1

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

<input placeholder="foo">

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

input {
  width 95%;
}

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

有更多关于iOS 6 从横向到纵向的文本输入占位符属性的工作方法的讨论

于 2013-05-10T10:38:35.510 回答
-1

你可以试试

<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) {

}
于 2012-10-31T14:03:01.900 回答