Bootstrap

移动端微信里打开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初始化后才可以调用其的方法设置字体到默认大小。

;