微信,QQ放大缩小，html页面布局错乱问题

问题：微信、部分Android内置浏览器等非自己开发的App都支持字体大小的调整 

解决方法：禁止缩放，缩放无效果

注意

1.  只针对微信、部分Android内置浏览器等非自己开发的App都支持字体大小的调整H5页面
2. 系统的改变字体并不会影响h5页面的字体大小，和app的字体大小。只会对系统字体大小改变   

 

实现方式

 

 iOS:

只需要加css在body

    -webkit-text-size-adjust: 100% !important;

    text-size-adjust: 100% !important;

    -moz-text-size-adjust: 100% !important;

 

Android：

Android则要分为两种情况

1、阻止系统自带的字体大小调整方式对自己开发的App的WebView的影响需要添加下面的代码到WebView组件设置字体默认缩放比例中（原生app）。

  WebSettings settings = webView.getSettings();

   settings.setTextZoom(100);

2、对于阻止微信调整字体对页面的影响，我们需要添加下面的代码到页面中：

    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {

        handleFontSize();

    } else {

        if (document.addEventListener) {

        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);

        } else if (document.attachEvent) {

        document.attachEvent("onWeixinJSBridgeReady", handleFontSize);

        }

    }

    function handleFontSize() {

        // 设置网页字体为默认大小

        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });

        // 重写设置网页字体大小的事件

        WeixinJSBridge.on('menu:setfont', function() {

        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });

        });

    } 

（原理：安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小，并且重写设置字体大小的方法，让用户不能在该网页下设置字体大小： 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示（单页面写在index.html没有这种问题））