如何通过CSS/JS阻止Cordova应用字体随移动设备系统字号设置变化

完全可以通过CSS、Cordova原生配置组合实现固定字体大小，不跟随系统字号变更，下面是不同层级的方案，优先选前面的即可：

1. CSS全局配置（最简便） #

直接在全局样式中加入以下规则，即可禁用WebView默认的字体大小适配逻辑：

/* 禁用WebView跟随系统字号缩放 */
* {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
/* iOS设备额外补充规则，兼容更低版本系统 */
html {
  -webkit-text-size-adjust: none !important;
}

这个方案对90%以上的机型都生效，不需要修改原生代码，适合快速验证。

2. Cordova原生配置（更稳定，推荐生产环境用） #

如果部分老旧机型CSS不生效，直接修改Cordova原生配置从WebView层面禁用字号调整，兼容性拉满：

安卓端配置 #

找到安卓工程下的MainActivity.java文件，在onCreate方法中追加代码：

// 固定WebView字体缩放比例为100%，忽略系统字号设置
WebSettings webSettings = appView.getSettings();
webSettings.setTextZoom(100);

iOS端配置 #

找到iOS工程根目录的config.xml文件，添加以下偏好配置：

<preference name="EnableViewportScale" value="false" />
<preference name="DisablePageZoom" value="true" />

3. JS兜底方案 #

极端场景下如果还有异常，可以用JS强制校验重置字体大小，作为最后一层兜底：

// 固定根字体大小为你设定的基准值，比如16px
const BASE_FONT_SIZE = 16;
function resetFontSize() {
  const root = document.documentElement;
  const currentSize = parseFloat(window.getComputedStyle(root).fontSize);
  // 实际大小和基准值偏差超过1px就强制重置
  if (Math.abs(currentSize - BASE_FONT_SIZE) > 1) {
    root.style.fontSize = `${BASE_FONT_SIZE}px`;
  }
}
// 页面加载、窗口大小变化、页面显示时都执行校验
window.addEventListener('load', resetFontSize);
window.addEventListener('resize', resetFontSize);
window.addEventListener('pageshow', resetFontSize);

注意事项 #

• 如果你项目中使用了rem单位，需要确保根字体的计算逻辑和上面的固定值匹配，不要用动态计算根字体的逻辑
• 优先使用原生配置+CSS的组合，JS方案只做兜底，不需要额外引入

内容的提问来源于stack exchange，提问作者BlU3_ 5KY