如何阻止Android版Chrome自动调整字体大小？

问题背景 #

已将文档全局字体大小设为16px，添加了正确的viewport标签和-webkit-text-size-adjust: none样式，但在Galaxy S9+的Android Chrome 127.0.6533.103中，第二个section内的段落计算字体大小被自动调整为17.6px，需要阻止这种自动缩放行为。

原始代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Webpage</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            height: 100%;
            -webkit-text-size-adjust: none;
        }

        body {
            height: 100%;
            font-size: 16px;
            color: black;
            background-color: whitesmoke;
        }

        section {
            background-color: lightgray;
            margin: 1rem 0;
            padding: 1rem 2rem;
        }

        .flex-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <div class="flex-container">
                <div>
                    <p>Some sample text in original font size.</p>
                </div>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                </div>
            </div>
        </section>
        <section>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum magni eligendi
                officia velit corporis dolorum reiciendis autem aperiam veniam, voluptatum illum 
                cum est. Accusamus deleniti numquam corporis mollitia libero tempora?
            </p>
    </section>
  </main>
</body>
</html>

解决方法 #

1. 补充完整的text-size-adjust属性 #

Chrome目前优先识别标准属性text-size-adjust，仅加webkit前缀可能不生效，需添加全兼容写法：

html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none; /* 标准属性 */
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

2. 直接锁定目标元素字体大小 #

对容易被缩放的段落元素强制指定字体大小，避免浏览器自动调整：

p {
    font-size: 16px !important;
    /* 或使用rem单位，基于body的16px基准 */
    /* font-size: 1rem !important; */
}

3. 关闭Chrome的自动放大逻辑 #

Chrome会对长文本段落自动放大，可通过额外CSS禁用该行为：

body {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

4. 优化viewport标签 #

确保viewport标签无冲突属性，添加viewport-fit=cover提升兼容性：

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

原因说明 #

移动端Chrome存在“智能文本缩放”机制，会对它判定为“过小”的长文本自动放大，旧版webkit前缀属性已被标准属性替代，因此需要补充完整的属性声明才能覆盖浏览器默认行为。

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