微信修改字体大小或者开启关怀模式导致H5页面错乱的解决方案

原因 当微信内修改默认字体大小或者开启微信内关怀模式，由于H5页面是在微信内置浏览器中打开，所以字体也会随之修改，导致页面布局改变。
解决方案 需要给安卓、ios同时添加配置，禁止内置浏览器修改H5页面。在vue中，我们给public文件夹下的index.html添加配置

• 安卓 在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 })
              })
          }
      })()

• ios 在style标签内添加样式，通过修改样式进行配置

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