ios - 基于 Em 的 CSS 媒体查询在 Ios Mobile Safari 上显示的分辨率低于预期

Question

我正在研究 new website使用基于 em 的 CSS 媒体查询。过去，我一直使用基于 px 的媒体查询。我想尝试一些新的东西。我以大多数手机(纵向)、大多数手机(横向)和平板电脑(纵向)以及大多数平板电脑(横向)的布局方式进行设置。

如预期的那样，在桌面浏览器(IE、Firefox、Chrome)、Android(Android 浏览器、Chrome)和 Windows Phone (IE) 上一切正常。 iOS (Safari) 按预期显示纵向版本，但切换到横向后仍保持纵向布局。这已经在 iPhone 5 (iOS7)、iPad 2 (iOS7) 和 iPhone 4s (iOS6) 上进行了测试，它们始终不一致。

HTML:

<meta name="viewport" content="width=device-width">

CSS:

/* portrait phone (< 480px) */
@media screen and (max-width:29.9999em) {
}

/* landscape phone and portrait tablet (>= 480px < 960px) */
@media screen and (min-width:30em) and (max-width:59.9999em) {
}

/* landscape tablet and normal monitor (>= 960px < 1440px) */
@media screen and (min-width:60em) and (max-width:89.9999em) {
}

/* bigger monitor (>= 1440px) */
@media screen and (min-width:90em) {
}

/* big monitor (>= 1920px) */
@media screen and (min-width:120em) {
}

因此，iPhone(横向)应介于 (min-width:30em) 和 (max-width:59.9999em) 之间，iPad(横向)应介于 (min -宽度:60em)和(最大宽度:89.9999em)。不幸的是，它们都缩小了一个查询范围。

在通过 stackoverflow 搜索时，我找到了 this post这表示移动版 Safari 中的默认字体大小是 12px(不是正常情况下的 16px)。我没有在任何其他网站上看到这一点，但计算似乎是有意义的(不过进一步计算似乎并没有将它们放在不同的媒体查询组中)。

作为对该帖子的回应，我将基本字体大小设置为 16 像素。

CSS:

html { font-size:16px; }

我的想法是它会覆盖浏览器的默认设置并与正在测试的所有其他浏览器相匹配。不幸的是，移动版 Safari 在横向时仍使用纵向布局。

我读过几页提到需要用 Safari 刷新(不确定它是移动设备还是桌面设备)，所以我什至试过了。

有人知道为什么会这样吗？如前所述，我已经使用基于 px 的媒体查询创建了其他站点，并且它们按预期运行。

Answer 1

在媒体查询中，em 基于浏览器的默认字体大小(注意用户可以修改它)。您无法改变这一点。

相关:

• http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/
• http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
• http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/
• http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/