uniapp H5打包發(fā)布后在部分手機(jī)字體無(wú)故變大，導(dǎo)致頁(yè)面錯(cuò)亂，字體都是使用upx(rpx)單位的(這個(gè)不是問(wèn)題原因)，在電腦的瀏覽器和微信開(kāi)發(fā)者工具上各種機(jī)型測(cè)試頁(yè)面都是正常的。

最后使用多個(gè)手機(jī)型號(hào)測(cè)試后，發(fā)現(xiàn)這個(gè)與手機(jī)型號(hào)無(wú)關(guān)，與微信設(shè)置的字體大小有關(guān)系。字體無(wú)故變大，導(dǎo)致頁(yè)面錯(cuò)亂的手機(jī)都是把微信字體設(shè)置了非標(biāo)準(zhǔn)大小字體的手機(jī)。

查看微信字體大?。捍蜷_(kāi)微信 → 我 → 設(shè)置 → 通用 → 字體大小

解決方法：

在App.vue的<script></script>代碼修改成一下代碼(安卓手機(jī))

<script>
    // #ifdef H5
    (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() {
       // 設(shè)置網(wǎng)頁(yè)字體為默認(rèn)大小
       WeixinJSBridge.invoke('setFontSizeCallback', {
        'fontSize': 0
       });
       // 重寫(xiě)設(shè)置網(wǎng)頁(yè)字體大小的事件
       WeixinJSBridge.on('menu:setfont', function() {
        WeixinJSBridge.invoke('setFontSizeCallback', {
         'fontSize': 0
        });
       });
      }
     })();
    // #endif
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

在App.vue的<style></style>代碼修改成一下代碼(蘋(píng)果手機(jī))

/* #ifdef H5 */
body { /* IOS禁止微信調(diào)整字體大小 */
            -webkit-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            -moz-text-size-adjust: 100% !important;
}
/* #endif */