如何让Android系统字号影响网页？MIUI适配问题求助

问题根源 #

MIUI自带的浏览器/WebView有特殊的「智能文本适配」逻辑：

• 当页面内容较短时，会强制锁定文本大小，忽略你设置的根元素font-size
• 默认的font-size: 100%没有明确绑定系统字号偏好，导致REM无法响应系统设置

直接解决方案 #

1. 禁用浏览器自动文本缩放

在CSS中给html标签添加强制禁用自动缩放的属性，同时显式绑定根字体到系统默认基准：

html {
  /* 禁止浏览器自动调整文本大小 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 绑定到系统默认16px基准，会随系统字号同步变化 */
  font-size: 16px;
}

这会强制浏览器严格遵循你设置的根字体大小，不会因为内容长短触发智能缩放。

2. 用JS兜底适配（如果CSS方案无效）

如果上面的CSS不生效，用JS监听系统字号变化，动态更新根字体：

// 监听窗口resize（系统字号修改会触发resize事件）
window.addEventListener('resize', () => {
  const rootFontSize = getComputedStyle(document.documentElement).fontSize;
  document.documentElement.style.fontSize = rootFontSize;
});

// 页面加载时初始化一次
document.documentElement.style.fontSize = getComputedStyle(document.documentElement).fontSize;

3. 优化viewport标签

确保viewport标签配置完整，避免额外缩放干扰：

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

验证修改 #

把你的测试代码按上面的方法修改后，就能看到：

• 红色DIV的宽高会随系统字号同步变化
• 无论section内容长短，文本都会跟随系统字号缩放

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