正如帖子的标题所说，在所有Webkit浏览器中将设备方向从横向更改为纵向时，我在x轴上出现溢出问题，我只尝试过iOS和Android驱动设备[iPhone 4,4S＆amp; 5，三星Galaxy Nexus，三星Galaxy II＆amp; 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应用程序页面上，布局与设备屏幕宽度的宽度相同，因此只有在转向横向并返回到纵向后，我才能得到它。我希望这是一个很好的解释（：
答案 0 :(得分：1)
我在我正在制作的网页上遇到了同样的错误。在最小化页面后，我最终将其追踪到占位符：
<input placeholder="foo">
如果在横向模式下输入的宽度比纵向宽度宽，则会出现错误：
input {
width 95%;
}
如果您看到的错误也是由占位符引起的，则输入的父元素上隐藏的简单overflow-x：可以作为我的修复。
在Placeholder attribute on text input with iOS 6 from landscape to portrait
上有关于工作方式的更多讨论答案 1 :(得分：-1)
你可以尝试
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
EDIT
好的，我通常使用没有问题的元名称与媒体查询如下面结合方向
@media screen and (min-width: 480px) and (orientation:portrait) {
}