16px 字号下限与 iOS 缩放
配方里唯一一条与桌面端无关的声明是 font-size: max(16px, 1rem)。它处理的是 iOS Safari 的一个长期行为:聚焦到字号低于 16px 的表单控件时,浏览器判定文字太小,自动把整页放大到该控件可读的比例。
1 · 默认值正好落在触发区
这个行为与 <textarea> 的默认形态相撞得很准。不受作者样式影响的控件字号实测 13.3333px(Chrome 152,核对于 2026-09),Firefox 与 Safari 的取值不同但同样低于 16px——什么都不写恰好就是会触发缩放的那一档。
有趣的是,加了 reset 的项目往往反而不会遇到它:Tailwind 的 preflight 给表单控件写了 font: inherit,字号随正文变成 16px,缩放不再触发。这解释了同一个问题在不同项目里的能见度差异——它更常出现在「几乎没写 CSS」的页面上,而不是样式最重的页面上。
警示 · 缩放行为属于 WebKit 的表单启发式,不在 MDN BCD 的覆盖范围内,因而无法像其余几条那样给出版本号。本页的其余数字都来自 Chrome 152 的实测,这一条没有:手边没有 iOS 设备可核(据 WebKit 长期行为与社群共识,核对于 2026-09)。缩放触发后页面不一定会自动缩回,这也是它比「字变大了」更恼人的原因。
2 · 三种写法的取舍
| 写法 | 根字号 10px 时 | 根字号 20px 时 | 问题 |
|---|---|---|---|
font-size: 16px |
16px | 16px | 用户调大系统字号,控件不跟随 |
font-size: 1rem |
10px | 20px | 低于 16px,触发缩放 |
font-size: max(16px, 1rem) |
16px | 20px | 两边都满足 |
第二行不是假想。html { font-size: 62.5% } 是一种流传很广的写法,用意是让 1rem 等于 10px 以便心算——在这类项目里 font-size: 1rem 的控件字号就是 10px。
max() 表达的是「下限」而不是「定值」,这一区别对可访问性是实质性的:把字号硬编码成 16px 的控件,在把系统字号调到 200% 的用户那里仍然是 16px。
em 相对演示容器模拟 rem 相对根元素,算式相同。3 · 这条声明没有管到的事
font-size 只改字号,不改字体族。配方设了字号却没设 font-family,控件因此保留 UA 的 monospace——整份配方跑下来,实测字体族仍是 monospace,行高仍是 normal。
这个遗留会顺着 1lh 传导到高度上:行数尺寸与 lh 单位 里的「五行」是按当前字体的行距算的,字体没接管,行距也就没接管。完整的实测与补法见 完整配方与变量接口 §3。