最近发现在微信浏览器中调整页面的字体大小时,会打乱页面的整个布局,在网上找了找解决的方案,找到了以下此方案,有效的解决了这个问题
目前iOS的解决方案是覆盖掉微信的样式:
/* IOS禁止微信调整字体大小 */
body { -webkit-text-size-adjust: 100% !important; }
安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小,并且重写设置字体大小的方法,让用户不能在该网页下设置字体大小:
/*
* android禁止微信浏览器调整字体大小
* 这种方法会导致网页延迟大约1S
*/
//android禁止微信浏览器调整字体大小 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() { // 设置网页字体为默认大小 WeixinJSBridge.invoke(‘setFontSizeCallback‘, { ‘fontSize‘ : 0 }); // 重写设置网页字体大小的事件 WeixinJSBridge.on(‘menu:setfont‘, function() { WeixinJSBridge.invoke(‘setFontSizeCallback‘, { ‘fontSize‘ : 0 }); }); }
这样解决会出现的问题:
1、如果用户在标准情况下,打开页面。再调整字体大小,那么页面依旧正常。
2、如果用户先调整了字体大小,再打开页面,页面会变大,一秒之后恢复正常。
注:采用loading,可解决2的问题