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>

  • 相关阅读:
    Remote procedure call (RPC) redis使用
    python Redis使用
    python rabbitMQ有选择的接收消息(exchange type=direct)或者(exchange_type=topic) 
    pyhon rabbitMQ 广播模式
    python之RabbitMQ简单使用
    python selectors模块使用
    python IO多路复用之Select
    Java多个jdk安装切换
    IDM下载器
    联想小新安装win10
  • 原文地址:https://www.cnblogs.com/joe235/p/14804390.html
Copyright © 2011-2022 走看看