项目本身前端用的是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的值，默认的放大缩小功能还是需要禁止掉的.
有帮到朋友解决问题的麻烦点个赞或者评论回复一下，谢谢