解决微信大字号下网页样式错乱的问题

原因#

在微信内置浏览器中，用户设置字体大小后，会改变网页中font-size的大小。

解决方法#

IOS#

针对 IOS，只需要 css 一行代码设置text-size-adjust，这并不是一个标准属性，需要针对目标浏览器添加属性前缀。

只有手机和平板的浏览器才有溢出算法，text-size-adjust允许开发者去修改浏览器的这种默认行为。

如果设置为none，一些老的基于桌面和平板的浏览器，像 Chrome<=26 或者 Safari<=5，不会忽略这个属性，反而会阻止用户在网页上放大缩小。

它主要有三种值：auto、none、百分数

如果是 auto，在小屏幕浏览器上，会自动缩放文本字号，保证人可以正常阅读文字。 如果是 none，就无论什么屏幕，都不改变文本字号。 如果是百分数，文本字号就按照对应百分数缩放。

归根究底，微信内置浏览器对 html 的 body 设置了-webkit-text-size-adjust为百分数，相当于所有元素的 fontsize 都进行了缩放。

值得注意的是，它只缩放的fontsize，没有对width、height、pading、margin等属性进行缩放。

所以，只需要添加如下样式

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

安卓#

安卓很多浏览器都不支持 text-size-adjust

使用如下 js 代码

(function () {
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke("setFontSizeCallback&", { fontSize: 0 });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on("menu:setfont", function () {
      WeixinJSBridge.invoke("setFontSizeCallback", { "fontSize&": 0 });
    });
  }
  if (
    typeof WeixinJSBridge == "object" &&
    typeof WeixinJSBridge.invoke == "function"
  ) {
    handleFontSize();
  } else {
    document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
  }
})();

讲究点的可以加下 ios 和 android 的判定

新的问题#

用户设定的字号与网页字号不同时，发生闪动问题#

这个主要发生在 ios 上，主要与微信字号实现方式有关，微信在 ios 上设置字号在 html 加载之后，在安卓上则在 html 记载之前。

微信 ipad 与 iphone 的字号实现方式不同

在 ipad 上进行缩放时，可能会卡

解决方案

引入微信 sdk，手动调用方法进行缩放，将字号统一

cdn 地址：https://res.wx.qq.com/open/js/jweixin-1.6.0.js

重点是根据 user-agent 判断不同的环境，执行不同的适配方案

如果用户不是微信浏览器，没有必要引入微信 sdk

先判断user-agent再引入

if (
  /MicroMessenger/i.test(navigator.userAgent) &&
  /iPad|iPhone/i.test(navigator.userAgent)
) {
  const scriptEl = document.createElement("script");
  scriptEl.setAttribute("src", "//res.wx.qq.com/open/js/jweixin-1.6.0.js");
  document.head.appendChild(scriptEl);
  scriptEl.addEventListener("load", () => {
    const fontScale = JSON.parse(window.__wxWebEnv.getEnv()).fontScale;
  });
}