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

       上面这部分的代码我测试后，对 ios 和安卓有效果，在调整字体里面，拖动滑块，并没有对页面产生影响。

       在 ios 下还可以使用这个 css 属性

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

       这个属性（实验性功能），设置为100%，是为了关闭字体大小自动调整功能。一般来说，安卓和 ios 的浏览器，当我们横向或者纵向显示时，浏览器会自己改变当前字体，以达到一个方便阅读的效果。所以设置为100%，保持不变 （个人理解）。MDN对这个样式属性的一些说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust

解决后的效果

       加入那些代码后，安卓和 ios 均不会受右上角菜单的“调整字体”功能的影响，如下图所示

到此这篇关于HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题的文章就介绍到这了,更多相关html5微信内置浏览器调整字体页面错乱内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题全部内容，希望文章能够帮你解决HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。