使用媒体查询从纵向切换到横向时出现问题

Question

我现在开始对我的网站使用响应式方法。我发现http://fluidbaselinegrid.com/是最好的样板。但是对于我尝试的每个样板或网格，当你从纵向模式切换到横向模式时，我无法通过iPhone或iPad识别媒体查询。

它总是在您加载页面的方向上加载正确的css。但是当您从纵向转到横向时，它会挂起并且不会正确调整大小。

您甚至可以在http://fluidbaselinegrid.com/上看到这种情况。

有谁知道这是否是我们现在必须要使用的移动网络套件的怪癖，还是有办法解决这个问题？

Answer 1

我联系了Fluid Baseline Grid后面的开发人员并得到了这个答案：

  

我认为您遇到的是视口元标记。

     

当前：

     

最大比例不允许用户用手指捏合放大/缩小。   但是，它可以防止在更换设备时进行布局移位   肖像到风景。这是故意删除，以帮助那些谁   可能有损伤阅读较小的文字。你可以简单地改变   头部中的元标记用于设置比例，这将固定缩放   从纵向旋转到横向时出现问题。

     

     

“如果网络开发人员希望他们的比例设置保持一致   在iPhone上切换方向，他们必须添加最大规模   值以防止此缩放，这有时是不需要的一面   阻止用户放大的效果“    - http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/

这肯定解决了这个问题，但似乎你无法用手指捏缩放，也可以控制布局切换的方式。有办法解决这个问题吗？

Answer 2

我解决了仅向视口元标记添加'initial-scale = 1'（而不是'maximum-scale = 1'）