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

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

白屏:微信里打开h5链接,首次打开正常,后面再次点开这个h5链接地址,无限白屏
白屏 2 问题: 第二次点击后, #/没有跳转的路由,重定为index: 加判,非正常退出,再次进入的路由跳转
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
在微信里打开网页，video视频出现问题，video.js插件解决
在调试的过程中,发现电脑端,手机端在谷歌中打开是没有问题的.但是在微信里打开页面出现问题. 分析:微信自带的内嵌浏览器是X5内核,而谷歌的内核是Webkit,video在X5内核里有兼容性的问题. 通 ...
微信里打开公众号关注页面
在微信里使用跳转链接:(可直接跳转到关注公众页面) https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=****&sce ...
html禁止手机文字放大,js实现移动端微信页面禁止字体放大
由于微信自带字体放大功能,因此基于微信的页面都可以通过微信进行字体放大,但是有些情况下这并不是我们想要的,因为很多移动端页面的开发都是使用rem作为单位的,当使用微信进行字体放大是,会导致页面的整体布 ...
JS设置请在微信客户端打开链接提示页面
判断JS: var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') != -1; ...
微信直接打开公众号页面公众号uin_base64直接获取(不用管理员账号直接获取)
在网上看了获取微信公众号链接直接跳转的方法但是需要获取uin_base64这个参数而且都是要管理员登录微信公众平台才行,但是很多情况下我们不是公众号的管理员所以f12获取参数根本不可能后来经他 ...
Web端(微信小程序)H5+java+selenium自动化
前置步骤,创建工程(可以testng或普通工程),这里默认是创建的testng工程,前面文章中有讲如何配置好testng工程当前很多微信小程序都是H5实现,这章主要是讲如何测试H5自动化. 直接上代 ...
聊聊微信内打开H5链接时如何自动跳转外部浏览器打开
很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面跟大家聊聊微信内如何实现自动跳转外部浏览器打开网页功能目的生 ...

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

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

最新文章

热门文章