如何在国产移动浏览器中禁止页面字体跟随浏览器缩放？

Question

在浏览器里面设置字体大小导致文字变大，样式变形
微信浏览器可以通过api实现，国产的移动浏览器有无办法实现，百度、夸克等等
已尝试过text-size-adjust，不兼容

Answer 1

一、基础方案：通过Viewport Meta标签限制缩放

在HTML头部添加以下代码，禁止用户手动缩放页面，从而间接固定字体大小：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

原理：通过限制缩放比例和禁止用户缩放操作，避免浏览器动态调整字体大小。
注意：部分浏览器可能忽略此设置，需结合其他方案增强效果。

---

二、动态调整字体大小（JavaScript方案）

通过JavaScript监听窗口缩放事件，强制重置字体大小：

// 初始化字体大小
function setRootFontSize() {
  document.documentElement.style.fontSize = '16px'; // 固定基准值
}

// 监听resize事件
window.addEventListener('resize', () => {
  setRootFontSize();
});

// 初始化调用
setRootFontSize();

原理：当浏览器尝试缩放时，动态重置根元素字体大小，抵消缩放影响。
兼容性：适用于大部分现代浏览器，但需测试目标浏览器的具体表现。

---

三、CSS强制固定字体单位

使用绝对单位（如px）设置字体大小，避免相对单位（如rem、em）受缩放影响：

html {
  font-size: 16px; /* 固定基准值 */
}

body {
  font-size: 1rem; /* 通过基准值计算，但实际渲染仍受缩放影响，需结合JavaScript修正 */
}

局限性：无法完全阻止浏览器强制缩放，需配合JavaScript方案使用。

---

四、针对WebKit内核浏览器的补充方案

若目标浏览器基于WebKit（如部分国产浏览器），可尝试：

html {
  -webkit-text-size-adjust: none; /* 禁止自动调整字体大小 */
  text-size-adjust: none; /* 兼容标准属性 */
}

注意：此方法在部分国产浏览器中可能失效，需结合其他方案。

---

五、增强兼容性：多重防护策略

1. 组合使用Viewport Meta + JavaScript：通过双重限制提升效果。

2. 防缩放事件拦截：参考网页中的代码，阻止双击缩放和手势缩放：

   document.addEventListener('touchstart', preventZoom, { passive: false });
   document.addEventListener('touchend', preventZoom, { passive: false });
   function preventZoom(event) {
     if (event.touches.length > 1) event.preventDefault();
   }

---

六、测试与验证

1. 目标浏览器测试：在百度、夸克等浏览器中验证方案有效性。
2. 极端场景测试：模拟用户强制缩放（如双指缩放），确保字体大小稳定。

---

通过Viewport限制 + JavaScript动态修正 + CSS固定单位的组合方案，可有效抑制国产移动浏览器字体缩放问题。若需更高兼容性，建议优先采用JavaScript动态调整方案。