移动端视图字体大小显示异常问题求助

问题出在你的HTML头部的viewport meta标签拼写错误——你写的是name="vieport"，正确的拼写应该是name="viewport"。

这个拼写错误会导致移动端浏览器无法识别视口配置：

• 桌面端浏览器不受该meta标签影响，所以字体显示正常；
• 移动端浏览器会默认使用桌面级视口宽度（通常为980px），并自动缩放页面适配设备屏幕，这就使得你的20px字体被缩小显示；
• 当你调整窗口大小时，浏览器重新触发布局计算，可能触发了 fallback 逻辑，才让字体恢复到设定的20px大小。

只需修正meta标签的拼写即可解决问题：

<meta name="viewport" content="width=device-width, initial-scale=1">

修正后，移动端浏览器会正确将视口宽度设置为设备宽度，并禁用初始缩放，你的20px字体就能在移动端视图里稳定显示，不管切换设备预设还是调整窗口大小，字体尺寸都会保持设定值。

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