解决rem页面在微信浏览器中样式错乱问题

解决rem页面在微信浏览器中样式错乱问题

问题原因：微信字体设置不是标准大小，

解决方法：禁止微信调整字体大小即可

安卓系统处理方法：

function handleFontSize() {
	    // 设置网页字体为默认大小
    WeixinJSBridge.invoke("setFontSizeCallback", {
        "fontSize": 0
    })
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on("menu:setfont", function() {
        WeixinJSBridge.invoke("setFontSizeCallback", {
            "fontSize": 0
        })
    })
}

(function() {
	if(typeof WeixinJSBridge == "object" && "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);
		}
	}
})()

IOS处理方法

 	body {
 		-webkit-text-size-adjust: 100% !important;
 	}

感谢这位知乎大佬文章：https://zhuanlan.zhihu.com/p/443319104