H5禁止微信内置浏览器调整字体大小

2022-08-25  本文已影响0人  一页莲子

微信公众号开发时 有种场景需要考虑 就是微信会有老年模式、或者调节微信字体大小时,再次访问微信公众号内容 会发现挂在H5的网页页面字体会变化导致页面出现内容错乱,下面代码块可直接解决这种场景下问题,话不多说直接上代码

1、css部分
IOS的解决方案是覆盖掉微信的样式:
body { /* IOS禁止微信调整字体大小 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}
2、Js部分
<script>
       (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() {
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               });
           }
       })();
</script>
上一篇 下一篇

猜你喜欢

热点阅读