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

Posted 2023-03-06

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

【英文标题】：Em-Based CSS Media Query Showing Smaller Resolution Than Expected On Ios Mobile Safari

【发布时间】：2013-11-03 09:11:33

【问题描述】：

我正在使用基于 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) 之间。不幸的是，它们都落在一个查询范围内。

在通过 *** 搜索时，我发现 this post 说移动 Safari 中的默认字体大小是 12 像素（不是正常的 16 像素）。我没有在任何其他网站上看到过，但计算似乎是有道理的（不过，进一步计算似乎没有将它们放在不同的媒体查询组中）。

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

CSS：

html  font-size:16px; 

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

我读过几页提到需要用 Safari 刷新（不确定是移动版还是桌面版），所以我什至尝试过。

有没有人知道为什么会发生这种情况？如前所述，我使用基于 px 的媒体查询创建了其他网站，它们的功能与预期相同。

【参考方案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/

【讨论】：

嗯...我的印象是html font-size:16px; 改变了浏览器的默认字体大小。这不正确吗？ !important 会覆盖它吗？

【参考方案2】：

这是最终起作用的修复...

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%;