• 在微信浏览器字体被调大导致页面错乱的解决办法


    iOS的解决方案是覆盖掉微信的样式:

    body { /* IOS禁止微信调整字体大小 */
        -webkit-text-size-adjust: 100% !important;
    }

    安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小,并且重写设置字体大小的方法,让用户不能在该网页下设置字体大小:

         (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 }); }); } })();
    (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 });
        });
    }
    })();

  • 相关阅读:
    什么是ETL?5分钟看完秒懂
    横向滚动 css
    解决echarts中横坐标值显示不全(自动隐藏)问题
    Echarts
    post 二进制流下载文件
    如何停止foreach
    日期格式 js
    cookie 属性
    HTML5 file对象和blob对象的互相转换
    前端图片压缩
  • 原文地址:https://www.cnblogs.com/zishan/p/9184094.html
Copyright © 2020-2023  润新知