移动端Chrome点击按钮后页面文字变大问题求助

• 问题根源：移动端Chrome自带字体自动缩放机制，当页面有动态内容变化（比如点击按钮显示隐藏文本）时，浏览器可能误识别文本需要放大，导致按钮上方的文字异常变大。

• 具体修复方案：

  1. 强制禁用字体自动缩放：给页面全局或出现问题的文本容器添加CSS属性，固定文本缩放比例：

     body {
       -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
     }
     

     这个属性直接告诉浏览器保持100%的文本尺寸，禁止自动调整。
  2. 明确设置文本字号：确保所有文本元素都有清晰的font-size定义，避免依赖浏览器默认值。比如给正文文本设置基准字号：

     .article-text {
       font-size: 16px; /* 移动端适配常用字号 */
     }
     

  3. 约束动态内容样式：如果是通过JS动态显示文本，给动态内容容器添加样式约束，避免触发浏览器异常重排：

     .toggle-content {
       max-width: 100%;
       word-wrap: break-word;
     }
     

内容的提问来源于stack exchange，提问作者Ramakrishna S