美文网首页
H5禁止微信内置浏览器调整字体大小

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

作者: 一页莲子 | 来源:发表于2022-08-25 14:38 被阅读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>
    

    相关文章

      网友评论

          本文标题:H5禁止微信内置浏览器调整字体大小

          本文链接:https://www.haomeiwen.com/subject/xeokgrtx.html