微信环境“关怀模式”导致H5页布局错乱问题

早晨一来公司，就有有反馈用户购买页布局错乱，一开始以为css不兼容，替换后发现还有字号问题，然后研究一同发现，有可能是微信用户设置了字号，一试还真是，于是开始对症下药

IOS 环境

body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

Android 环境

直接放在index.html 中 或者 新建外部文件引入均可

(function () {
  if (typeof WeixinJSBridge == 'object' && typeof window.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() {
    // 设置网页字体为默认大小
    window.WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 });
    // 重写设置网页字体大小的事件
    window.WeixinJSBridge.on('menu:setfont', function () {
      window.WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: 0 });
    });
  }
})();

再试一下，页面就恢复正常啦！！！