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

2024-07-01 10:00| 来源: 网络整理| 查看: 265

背景：移动端H5页面，视口设置

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初始化后才可以调用其的方法设置字体到默认大小。

【本文地址】

公司简介

联系我们