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

Question

我目前开始对我的网站使用响应式方法。我找到了 http://fluidbaselinegrid.com/成为最好的样板。但是，对于我尝试过的每个样板文件或网格，当您从纵向模式切换到横向模式时，我无法让 iPhone 或 iPad 识别媒体查询。

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

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

有谁知道这是我们现在必须忍受的移动 webkit 的怪癖，还是有办法解决这个问题？

Answer 1

我联系了Fluid Baseline Grid背后的开发者|得到了这个答案:

I think what you are experiencing is the viewport meta tag.

Current:

Maximum-scale doesn't allow the user to zoom in/out with finger pinch. However, it prevents the layout shifting when a device is changed from portrait to landscape. This was purposely removed to help those who may have impairment reading smaller text. You can can simply change the meta tag in the head to set the scale, which will fix the zooming issue when you rotate from portrait to landscape.

"If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in" - http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/

这确实解决了这个问题，但您似乎无法用手指捏合来缩放，也无法控制布局切换的方式。有办法解决这个问题吗？