zoukankan      html  css  js  c++  java
  • 微信H5适配 解决微信调整字体大小导致Html5页面混乱

    最近开发公众号遇到一个问题:

    iOS、Android 加载页面,如果用户调整了微信自带的字体大小,那么我们的页面就会跟随调整字体大小,导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。

    找了一些方法总结如下:

    原理:阻止ios和安卓调整字体大小时候的事件,ios通过添加css属性,安卓通过微信属性去阻止。

    iOS系统禁止微信客户端修改字体大小:

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

    Android 则通过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>

  • 相关阅读:
    ADT中通过Android SDK Manager去安装x86的image时无法下载
    javadoc 生成文档注释
    char类型的字节数
    win7下JDK环境变量设置方法
    artTemplate模板引擎
    输入与输出
    后台弹出JS类
    数据库主键的设计和思考
    Windows下批处理执行MySQL脚本文件
    You know元音字母吗?
  • 原文地址:https://www.cnblogs.com/joe235/p/14804390.html
Copyright © 2011-2022 走看看