是否有 CSS 或其他原因导致 Safari/iPhone 会忽略某些字体大小设置?在我的特定网站上,iPhone 上的 Safari 呈现一些 font-size:13px 文本大于 font-size:15px 文本。它可能不支持某些元素的字体大小吗?
Joe 的回复中有一些很好的最佳实践,但我认为您所描述的问题围绕着这样一个事实,即如果 Mobile Safari 认为文本将呈现太小,它会自动缩放文本。您可以使用 CSS 属性 -webkit-text-size-adjust
解决此问题。这是如何将其应用于您的身体的示例,仅适用于 iPhone:
@media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
此外,请确保在视口元标记中将初始缩放设置设置为 1:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
我不再使用像素定义,因为它们确实令人困惑,并且在视觉服务中并不完全相同。
认识单位
“Ems”(em):“em”是用于网络文档媒体的可扩展单元。一个 em 等于当前的 font-size,例如,如果文档的 font-size 是 12pt,则 1em 等于 12pt。 Ems 本质上是可扩展的,因此 2em 等于 24pt,.5em 等于 6pt,等等。由于可扩展性和对移动设备友好的特性,Em 在 Web 文档中变得越来越流行。像素 (px):像素是用于屏幕媒体(即在计算机屏幕上读取)的固定大小单位。一个像素等于计算机屏幕上的一个点(屏幕分辨率的最小单位)。许多网页设计师在网页文档中使用像素单元,以便在浏览器中呈现其网站时生成像素完美的表示。像素单元的一个问题是它不能向上缩放以供视障读者使用,也不能向下缩放以适应移动设备。点 (pt):点传统上用于印刷媒体(任何要打印在纸上的东西等)。一点等于 1/72 英寸。点很像像素,因为它们是固定大小的单位,不能按大小缩放。百分比 (%):百分比单位很像“em”单位,除了一些基本差异。首先,当前字体大小等于 100%(即 12pt = 100%)。使用百分比单位时,您的文本仍可完全适应移动设备和可访问性。
答案是对文本使用 1 个预定义单位(即 12pt),然后对所有后续 css 定义使用 font-size:90%;或字体大小:110%;等等等等。对于所有支持的设备来说,这更容易访问。
还要检查您是否没有为您正在操作的元素设置“宽度/高度”,Safari 的大小优先于 svg 中的字体大小,Chrome 和 FF 似乎至少目前没有。
我遇到了同样的问题,原来在原始 CSS 中有这一行:
-webkit-文本大小调整:120%;
我不得不将其更改为 100%,一切都很顺利。无需将所有 px 更改为 em 或 %%。
-webkit-text-size-adjust: 100%
- 这避免了自动更新,但允许用户启动缩放。 (source)