移动端微信里打开H5页面，页面字体放大

背景：移动端H5页面，视口设置<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

qq、浏览器打开页面字体大小正常

问题：微信打开页面，页面的字体被放大，感觉整体被放大

解决：

iOS: 

无论是系统自带的调整字体大小，还是一些App自带的调整字体大小iOS是调整WebView字体大小是通过给body添加-webkit-text-size-adjust来实现的，所以只需在body修改-webkit-text-size-adjust属性即可，下面写的这两种方法都可以，选其一即可，方法如下：

/* IOS微信、UC浏览器阻止字体大小调整 */

body {

-webkit-text-size-adjust: none !important;

}

body {

-webkit-text-size-adjust: 100% !important;

}

 

Android：

Android则要分为两种情况：

1、阻止系统自带的字体大小调整方式对自己开发的App的WebView的影响需要添加下面的代码到WebView组件设置字体默认缩放比例中。

WebSettings settings = webView.getSettings();
settings.setTextZoom(100);

2、对于阻止微信调整字体对页面的影响，我们需要添加下面的代码到页面中：

//Android微信中，借助WeixinJSBridge对象来阻止字体大小调整
(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 });
　　});
}
})();

这种方式的缺陷就是，页面先看到的是字体被放大的效果，然后闪回到正常的展示，估计1s，是因为WeixinJSBridge初始化需要一点时间，要等到WeixinJSBridge初始化后才可以调用其的方法设置字体到默认大小。