基于 em 的 CSS 媒体查询显示较小分辨率比 Ios 移动版 Safari 的预期

标签: ios
发布时间: 2014/2/22 10:59:28
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我工作在一个新的网站使用基于 em CSS 媒体查询。在过去,我总是用基于 px 的媒体查询。我想尝试新的东西。我有事情大多数的电话 (纵向)、 (景观) 中的大多数手机和片 (在纵向) 和上的大多数平板电脑 (景观) 将看到差异在布局中的这种方式设置。

一切工作,如所料,桌面浏览器 (IE,Firefox,Chrome)、 (Android 浏览器,Chrome),Android 和 Windows Phone (IE)。iOS (野生动物园) 显示纵向版本,如预期,但切换为横向纵向布局。这是测试 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) 。不幸的是,他们都属于一个查询较窄。

搜索时通过计算器,我发现这篇文章,说中移动 Safari 的默认字体大小是 12px (不 16px 为正常)。我没看见,在任何其他网站上,但计算似乎 (进一步计算似乎不把它们放在不同的媒体查询组,虽然) 有道理。

在回应这一职务,我设置基字体大小的 16px。

CSS:

html { font-size:16px; }

我想到的是会过度骑浏览器的默认设置,并会配合正在测试的每个其他浏览器。不幸的,移动 Safari 仍在使用时中景观的纵向布局。

我已经读了几页,提到需要刷新与 Safari (不确定是否是手机或桌面),所以我甚至试过。

是否有人有原因为什么会这样?如所述,我创建了使用基于 px 的媒体查询其他网站和他们功能作为预期。

解决方法 1:

这是修复程序结束了工作......

CSS:

body {
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}
官方微信
官方QQ群
31647020