近期用vue + vant 開發(fā)了一個公眾號? 用的是多頁面
在開發(fā)是為了手機適配丧蘸，自己計算了html的字體大小漂洋，用rem作為單位進行適配。
但是只要調整了手機系統(tǒng)的字體或者手機微信的字體力喷，頁面就出現(xiàn)位置錯亂問題刽漂，解決步驟如下：
1.開發(fā)時頁面少加入網(wǎng)頁文檔的屬性
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
2.IOS解決方案：
body {
-webkit-text-size-adjust:100%!important;
? ? text-size-adjust:100%!important;
? ? -moz-text-size-adjust:100%!important;
}
3.安卓解決方案：
通過 WeixinJSBridge 設置網(wǎng)頁字體為默認大小，并禁止用戶自定義縮放頁面
(function() {
????if (typeof WeixinJSBridge =="object" &&typeof WeixinJSBridge.invoke =="function") {
????????handleFontSize();
? ? }else {
????????if (document.addEventListener) {
????????????document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
? ? ? ? }else if (document.attachEvent) {
????????????//IE瀏覽器弟孟，非W3C規(guī)范
? ? ? ? ? ? document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
? ? ? ? }
????}
????function handleFontSize() {
????????// 設置網(wǎng)頁字體為默認大小
? ? ? ? WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' :0 });
? ? ? ? // 重寫設置網(wǎng)頁字體大小的事件
? ? ? ? WeixinJSBridge.on('menu:setfont', function() {
????????????WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' :0 });
? ? ? ? });
? ? }
})()
