css - 将设备方向从横向更改为纵向时，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)

...

所以我想知道是否有人遇到过这个问题，您是否有解决方案，因为这确实很烦人。

更确切地说，我有一个基于twitter引导框架构建的移动Web应用程序，它也只能在移动设备和平板上查看。因此很明显，我需要使用媒体查询来更改布局，具体取决于您正在查看Web应用程序的屏幕尺寸。我得到的问题是，当您以纵向模式浏览页面时，将设备方向更改为横向，然后又改回纵向，即使您第一次着陆时，内容也将大于设备的宽度。在纵向模式下的Web应用程序页面上，版式的宽度与设备屏幕的宽度相同，因此只有在转到横向并返回纵向后，我才能获得该宽度。我希望这是一个足够好的解释(:

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

}