如何使用CSS忽略手机系统的字体大小设置？

效果对比 #

正常显示效果	调整设置后	异常显示效果

核心解决方案 #

• 禁用浏览器字体自动缩放属性
  首先添加全局CSS样式，阻止浏览器和系统自动调整字体大小：

  * {
    /* 适配webkit内核浏览器（iOS Safari、安卓微信/Chrome等） */
    -webkit-text-size-adjust: 100% !important;
    /* 标准属性 */
    text-size-adjust: 100% !important;
  }
  

  该属性可以避免横竖屏切换、系统字体调整时，浏览器主动放大字体导致的排版错乱。

• 固定根元素字体基准（适配rem布局场景）
  如果项目使用rem作为单位，需要强制覆盖系统对根字体的修改，直接固定html根节点的字体大小：

  html {
    font-size: 16px !important;
    /* 若使用动态rem方案，可直接填写你计算好的预期根字体大小，不受系统默认值影响 */
  }
  

  针对部分安卓机型强制缩放px单位的特殊情况，可通过JS做二次校准：

  (function fixFontSize() {
    const html = document.documentElement;
    const actualSize = parseFloat(window.getComputedStyle(html).fontSize);
    const expectSize = 16; // 和CSS中设置的预期根字体大小保持一致
    if (actualSize !== expectSize) {
      html.style.fontSize = `${expectSize / (actualSize / 16)}px`;
    }
  })();
  

• 布局兜底优化
  如果不需要完全禁止用户调整字体大小，仅要保证排版不崩溃，可以做以下适配：

  • 容器不要写死固定高度，改用min-height，让容器可以随内容自动撑高
  • 单行文本截断添加text-overflow: ellipsis规则，避免文本溢出折行
  • 优先使用flex、grid等弹性布局，减少固定定位、固定宽高带来的排版挤压

• 内嵌WebView场景原生端配置
  如果Web应用内嵌在APP内，可以直接在原生端关闭字体缩放能力：
  安卓端：webView.getSettings().setTextZoom(100);
  iOS端：webView.configuration.preferences.minimumFontSize = 12; 或者全局设置字体缩放比例为1

内容的提问来源于stack exchange，提问作者Nguyễn Hồng Phát