在横向格式的移动设备上查看时，响应式网格中断

Question

我正在使用Andy Taylor的'1140px Grid System'建立一个网站。

在Android浏览器中一切正常，但在旋转到横向视图时，在Safari中的iPhone 3g上，网格的内容会流出视口。见下图...

Answer 1

我找到了这个问题的答案：

最初在标题中我们设置了视口比例：

<meta name="viewport" content="width=device-width,initial-scale=1">

但是，我的同事发现，对于iOS设备，您需要使用以下内容来设置iOS视口的最小和最大比例：

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

您可以在HTML5 Boilerplate's Github repository

上阅读有关此问题的一些信息

Answer 2

我自己也有类似的问题，然后去谷歌搜索。上面的解决方案在许多博客和文章中都有提及，但被认为是“治愈病人的治疗方法”，因为它在iOS4和iOS5中禁用了用户缩放（捏合/缩放）。

Filament Group似乎提供了一个更好的解决方案，它只会暂时禁用用户缩放，直到方向更改为横向。

Controlling text size in Safari for iOS without disabling user zoom

A Fix for the iOS Orientationchange Zoom Bug

我希望这会有所帮助。