为什么相同font-size在不同viewport设置的移动端显示效果差异大？

核心原因是iOS Safari针对无viewport标签的页面有两个默认适配行为，共同导致了这个反直觉的现象： #

1. 两种场景的基础渲染逻辑 #

• 带viewport标签的场景：
  你设置了<meta name="viewport" content="width=device-width, initial-scale=1">，此时：
  • 布局视口宽度等于iPhone X的逻辑像素宽度375px
  • 页面无缩放，1CSS像素=1设备独立像素，你CSS设置的16px就是实际渲染的字体大小，单行可容纳字数为 375px / 16px ≈ 23 个全角字符
• 不带viewport标签的场景：
  iOS Safari默认触发桌面端页面适配逻辑：
  • 布局视口默认设为980px，浏览器会把整个980px宽的页面缩小到375px宽的屏幕里完整显示，缩放比例约为375/980≈0.38，如果按这个比例渲染，16px的字体实际显示大小只有约6px，完全无法看清

2. 导致字数更少的核心：自动字体放大机制 #

为了优化移动端可读性，iOS Safari默认开启了-webkit-text-size-adjust: auto特性，会自动放大无viewport页面里的小字体，让用户不用手动缩放也能看清文字。
此时你CSS写的16px并不会按16px的CSS像素渲染，浏览器会自动把字体放大到适合阅读的尺寸（通常会放大到40px以上的CSS像素大小），就算布局视口有980px，按放大后的字体大小计算，单行可容纳的字数为 980px / 40px+ ≈ 20 个全角字符，自然比带viewport的页面字数更少。 #

验证方法 #

你可以在共用的CSS中添加如下代码关闭自动字体调整：

div {
  -webkit-text-size-adjust: 100%;
}

修改后再测试无viewport的页面，你会看到字体变得非常小，单行可容纳的字数会远多于带viewport的页面，符合“视口越宽、单行字数越多”的常规认知。

内容的提问来源于stack exchange，提问作者AnDromeda