項目本身前端用的是rem布局，在正常的文字大小下，布局跟觀感是沒啥問題，但是因客戶的一個操作，需要放大字體查看文章，結果頁面布局錯亂了，網上搜索一番都是禁止頁面放大縮小的。需求是要適配用戶微信端的文字大小調整，於是經過多番嘗試，有了如下的代碼
document.addEventListener("
WeixinJSBridgeReady", function() {
var _size = Math.floor(document.documentElement.clientWidth * 20 / 320) // rem計算的值
WeixinJSBridge.on("
menu:setfont", function(e) {
//e.fontSize,e.fontScale
switch (+e.fontSize) {
case 1:
document.getElementsByTagName('html')[0].style.fontSize = (_size - 2) + 'px'
break;
case 2:
document.getElementsByTagName('html')[0].style.fontSize = _size + 'px'
break;
case 3:
document.getElementsByTagName('html')[0].style.fontSize = (_size + 1) + 'px'
break;
case 4:
document.getElementsByTagName('html')[0].style.fontSize = (_size + 2) + 'px'
break;
case 5:
document.getElementsByTagName('html')[0].style.fontSize = (_size + 3) + 'px'
break;
case 6:
document.getElementsByTagName('html')[0].style.fontSize = (_size + 4) + 'px'
break;
case 7:
document.getElementsByTagName('html')[0].style.fontSize = (_size + 5) + 'px'
break;
case 8:
document.getElementsByTagName('html')[0].style.fontSize = (_size + 6) + 'px'
break;
}
WeixinJSBridge.invoke("setFontSizeCallback", {
fontSize: 0
})
})
//樣式也控制禁止放大縮小
var doc = document.documentElement;
doc.style.webkitTextSizeAdjust = "none"
}, !1);
以上的思路就是因為是基於rem布局，所有單位是rem,調整文字大小后只是修改fontSize的值，默認的放大縮小功能還是需要禁止掉的.
有幫到朋友解決問題的麻煩點個贊或者評論回復一下，謝謝