h5开发过程中,无论是本地手机调试,还是发给客户预览过程中,经常首先会用微信浏览器打开,有遇到的问题是pc模拟器中正常,但是微信浏览器整个布局都是乱的,其原因是微信浏览器中的字体设置大小。
如下,当字体设置为标准时,正常的页面呈现:
而当字体设置为其它时,页面的布局就乱了:
对此可以针对微信浏览器将字体设置为默认标准并且禁用字体大小调整,代码如下:
(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规范document.attachEvent("onWeixinJSBridgeReady", handleFontSize);}}})()function handleFontSize() {// 设置网页字体为默认大小WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' : 0 });// 重写设置网页字体大小的事件WeixinJSBridge.on('menu:setfont', function() {WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' : 0 });})}
可以看到更改后,无论如何调整微信浏览器的字体,页面都会按照默认标准字体进行呈现: