很多网页在电脑端显示正常，到手机上就出现文字过小、挤眼睛，或者浏览器自动乱放大文字。想要控制移动端网页字体，不能单纯修改font‑size，需要配合视口meta标签、CSS属性、单位选择、媒体查询一起处理。
一、基础配置：视口 meta 标签（必不可少）
放在<head>标签内，告诉浏览器使用设备真实屏幕宽度渲染页面，是移动端适配的前提。
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width：页面宽度跟随手机屏幕宽度initial‑scale=1.0：页面初始缩放比例1:1- 不建议写
user‑scalable=no，会禁止用户双指放大，违反无障碍体验，仅内部后台页面可酌情使用。
二、关闭浏览器自带的文本自动膨胀
部分手机浏览器会触发文本膨胀算法，无视你写的字号，自动放大或缩小文字，模拟器无法复现，只会出现在真机。
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
注意：不要设置为
none，该值会屏蔽系统大字体辅助功能，视力障碍用户无法放大文字，生产环境禁止使用。
三、2种主流实现方式修改移动端字体
方式1：@media 媒体查询（适合固定UI页面，如企业官网、资质展示页）
根据屏幕断点，不同屏幕宽度设置不同字号；屏幕越小，正文字号适度放大，保证阅读舒适。适合UI固定的页面，如之前的企业资质网页。
/* 桌面默认字号 */
body {
font-size:16px;
}
/* 平板 */
@media(max-width:900px){
body {font-size:17px;}
}
/* 手机 */
@media(max-width:768px){
body {font-size:17px;}
}
/* 小屏手机 */
@media(max-width:480px){
body {font-size:18px;}
}最佳实践：移动端正文最小字号不要低于16px，避免小字挤眼睛；标题、按钮内文字同步放大，不要写9px、10px这类极小字号。
方式2：rem根相对单位（适合阅读类网页，一键整体缩放）
rem参照html根元素字号，修改html的font‑size，页面全部rem单位的文字会统一缩放，不需要逐个修改class。
html {font-size:16px;}
body {font-size:1rem;}
@media(max-width:768px){
html {
font-size:18px; /*手机端整体放大全部文字*/
}
}四、字体单位对比，该选哪一个？
| 单位 | 特点 | 适用场景 |
|---|---|---|
| px | 绝对像素，写多少渲染多少，不受根字号影响 | 固定UI官网、企业展示页面；手机正文≥16px |
| rem | 相对于html根字号，改根字号全局一起缩放 | 文章、资讯阅读类网页 |
| em | 相对于父元素字号，容易嵌套放大错乱 | 组件内部（按钮、卡片），不建议全局正文使用 |
| vw | 跟随屏幕宽度，屏幕越小文字越小 | 慎用，小屏幕容易文字过小 |
五、高频真机踩坑排查
- Chrome模拟器正常，手机真机字体异常：添加
-webkit‑text‑size‑adjust:100%，模拟器不会模拟浏览器文本膨胀行为。 - iOS点击输入框页面突然放大：iOS要求输入框字体至少16px。设置
input,textarea {font‑size:16px;} - 微信安卓浏览器字体跟随系统设置变化：微信安卓会接管网页字体，想要强制固定字号，需要调用WeixinJSBridge JS接口做兼容。
六、最终最佳实践总结
- 1. head中配置标准viewport视口标签；
- 2. html添加
‑webkit‑text‑size‑adjust:100%，阻止浏览器擅自修改文字大小； - 3. 使用@media媒体查询或者rem单位控制移动端字号；
- 4. 移动端正文字号不小于16px，屏幕越小字号适度加大；
- 5. 同步放大行高line‑height，文字不要挤在一起，提升阅读体验；
- 6. 保留用户缩放页面能力，不要禁用缩放，兼顾无障碍访问。
