Question

我正在使用基于em的CSS媒体查询new website。过去，我一直使用基于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) and (max-width:59.9999em)之间，iPad（横向）应介于(min-width:60em) and (max-width:89.9999em)之间。不幸的是，它们都会使一个查询变得更窄。

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

作为回应，对于那篇文章，我设置了一个16px的基本字体大小。

CSS：

html { font-size:16px; }

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

我读过一些提到需要用Safari刷新的页面（不确定它是移动还是桌面），所以我甚至试过了。

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

Answer 1

在媒体查询中，em基于浏览器的默认字体大小（请注意，用户可以修改此内容）。你无能为力改变这一点。

基于Em的CSS媒体查询在Ios Mobile Safari上显示比预期更小的分辨率

2 个答案: