移动端浏览器字体缩放异常：安卓部分浏览器不生效的技术咨询

你的问题出在CSS全局字体设置和viewport配置上，部分移动端浏览器的全局字号缩放逻辑和桌面端存在差异，导致现有代码无法正常响应：

核心原因 #

1. 全局font-size: 100%的干扰
   你给所有元素设置了font-size: 100%;，这会让元素字体大小仅继承父元素尺寸，而多数移动端浏览器（如Chrome、Yandex）的全局字号调整是通过修改根元素<html>的默认字体大小实现的。这个全局规则切断了文本与根元素字号的关联，导致缩放无法作用于字体。

2. 固定宽度的viewport配置
   你的viewport设置为width=320px，固定了视口宽度，部分移动端浏览器会因此限制字号缩放的作用范围，仅影响边距等非文本元素。

修复方案 #

1. 调整CSS字体规则与单位 #

移除全局的font-size: 100%;规则，改用rem作为文本元素的字体单位（rem相对根元素字号变化），示例：

/* 移除全局font-size设置 */
div {
  margin: 1em;
  max-width: 100%;
  font-size: 1rem; /* 用rem替代固定比例或px */
}

2. 优化viewport meta标签 #

将固定宽度改为适配设备宽度，确保浏览器能正常应用全局缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

3. 额外注意事项 #

• 避免使用px作为字体单位，全部改用rem或em这类相对单位，确保文本能跟随浏览器全局字号调整。
• 不要添加user-scalable=no这类禁用缩放的viewport属性，这会直接阻止用户的缩放操作。

经过上述调整后，Chrome、Yandex等安卓移动端浏览器的全局字号设置就能正常影响文本大小，同时也符合可访问性设计的要求。

内容的提问来源于stack exchange，提问作者Rhino R.