微信H5页面已做适配

540 阅读1分钟

项目场景:

嵌入式微信H5页面已做适配,但是还会变形


问题描述:

很多时候做微信H5内嵌的时候会发现,已经做了适配但是有的手机就是会变形

原因分析:

我目前知道的原因是每个人微信字体不一致造成

解决方案:

安卓解决方案

 /* eslint-disable */ 
    /** 限制用户修改字体大小 */
    setting () {
      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解决方案

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