为什么部分网站不响应Chrome移动端浏览器的文字缩放设置？

两类站点的适配差异原因 #

你观察到的差异核心来自站点的移动端适配配置，最常见的影响因素有2项：

• viewport元标签配置：支持字体缩放的站点（如CNN）配置了正确的viewport规则，允许浏览器根据系统/浏览器的字体缩放参数调整页面渲染；不响应缩放的站点（如APNEWS）通常会在viewport中加入user-scalable=no、maximum-scale=1.0这类限制缩放的参数，或者干脆没有配置viewport元标签，导致Chrome将其识别为桌面端旧页面，不触发字体缩放逻辑
• CSS属性配置：如果站点的全局CSS中设置了text-size-adjust: none，会直接强制禁用浏览器的自动字体缩放功能，不管怎么调整浏览器的文字缩放设置，页面字体大小都不会变化，这就是CSS层面的核心影响配置。另外如果站点所有字体都用固定px单位，部分场景下也会导致缩放适配失效。

测试页面的修改方案 #

你提供的测试页面没有配置移动端viewport元标签，Chrome默认将其判定为桌面端页面，因此不会响应移动端的字体缩放设置，只需要在<head>标签内添加正确的viewport配置即可，修改后的完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- 新增viewport配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<div id="container">
This is a test page
</div>
</body>
</html>

如果添加后仍然不生效，可以检查全局CSS是否存在text-size-adjust: none规则，将其删除或者改为text-size-adjust: auto即可。如果要获得更好的缩放适配效果，建议页面字体尽量使用rem、em这类相对单位，而非固定的px单位。

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