zoukankan      html  css  js  c++  java
  • 微信字体大小调整导致的H5页面错乱问题处理

    当用户调整微信字体大小时会导致H5页面错乱,解决方案如下:

    ios:在css中加入-webkit-text-size-adjust: 100% !important;

    1.  
      body {
    2.  
      -webkit-text-size-adjust: 100% !important;
    3.  
      }

    安卓:借助WeixinJSBridge对象来阻止字体大小调整,将此段代码放在在程序的入口页面(例如 index.html / index.ejs等)即可

    1.  
      (function () {
    2.  
      if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    3.  
      handleFontSize();
    4.  
      } else {
    5.  
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    6.  
      }
    7.  
      function handleFontSize () {
    8.  
      // 设置网页字体为默认大小
    9.  
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    10.  
      // 重写设置网页字体大小的事件
    11.  
      WeixinJSBridge.on('menu:setfont', function() {
    12.  
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    13.  
      });
    14.  
      }
    15.  
      })();
     
     
  • 相关阅读:
    小程序实现无限瀑布流
    Vue H5 项目模板
    Taro使用mobx做国际化小程序
    一次国际化记录以及平铺JSON数据
    Promise(interesting)
    返回状态码
    CSS属性兼容写法
    在DOM加载之前insertScript
    关于吸烟
    前端优化措施
  • 原文地址:https://www.cnblogs.com/xuLessReigns/p/14237728.html
Copyright © 2011-2022 走看看