我正在使用基于 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) and (max-width:59.9999em)，而 iPad（横向）应该介于(min-width:60em) and (max-width:89.9999em). 不幸的是，它们都落在一个查询范围内。
在通过 stackoverflow 搜索时，我发现这篇文章说移动 Safari 中的默认字体大小是 12 像素（不是正常的 16 像素）。我在其他任何网站上都没有看到过，但计算似乎是有道理的（不过，进一步的计算似乎并没有将它们放在不同的媒体查询组中）。
作为回应，对于那篇文章，我将基本字体大小设置为 16 像素。
CSS：
html { font-size:16px; }
我的想法是它会覆盖浏览器的默认设置并与正在测试的所有其他浏览器匹配。不幸的是，移动版 Safari 在横向时仍然使用纵向布局。
我读过几页提到需要用 Safari 刷新（不确定它是移动设备还是桌面设备），所以我什至尝试过。
有没有人有发生这种情况的原因？如前所述，我使用基于 px 的媒体查询创建了其他站点，它们按预期运行。