首页 > 其他分享 >微信H5适配 解决微信调整字体大小导致Html5页面混乱

微信H5适配 解决微信调整字体大小导致Html5页面混乱

时间:2023-06-07 11:12:23浏览次数:52  
标签:字体大小 微信 WeixinJSBridge handleFontSize 适配 document 页面

最近开发公众号遇到一个问题:

iOS、Android 加载页面,如果用户调整了微信自带的字体大小,那么我们的页面就会跟随调整字体大小,导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。

找了一些方法总结如下:

原理:阻止ios和安卓调整字体大小时候的事件,ios通过添加css属性,安卓通过微信属性去阻止。

iOS系统禁止微信客户端修改字体大小

/* iOS禁止微信调整字体大小 */
body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}

Android 则通过js 调整:

<script>
// 强制禁止用户修改微信客户端的字体大小
       (function() {

           if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
               handleFontSize();
           } else {
               if (document.addEventListener) {
                   document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
               } else if (document.attachEvent) {
                   document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                   document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
           }
           function handleFontSize() {
               // 设置网页字体为默认大小
               WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               // 重写设置网页字体大小的事件
               WeixinJSBridge.on('menu:setfont', function() {
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               });
           }
       })();
</script>

 

标签:字体大小,微信,WeixinJSBridge,handleFontSize,适配,document,页面
From: https://www.cnblogs.com/webSnow/p/17462784.html

相关文章

  • 微信dat文件转图片(jpg,png,gif)
    微信电脑版现在已经是日常工作生活必不可少的工具,有时删除了聊天记录或被系统清理软件清理了,但还想查看曾经的微信聊天图片。这个时候辛辛苦苦找到了文件,却发现无法查看,因为微信电脑版为了保护我们的隐私,把原先的图片格式文件给做了加密处理变成了DAT格式,这里不得不给微信一个大大......
  • 微信小程序冒泡
    参考:https://jingyan.baidu.com/article/d5a880eb5439a053f147ccda.html手机有这个问题,电脑上没有小程序盒子内部的点击事件会触发外部盒子的点击事件,解决方法是把内部的点击事件的bindtap改成 catchtap......
  • c#正则表达式适配数学表达式(一)
    近日在做某项目时候,里面涉及到了与数学表达式有关的计算,为了高效的适配数学表达式现以正则表达式进行提取予以分享,若有需要的小伙伴可参考,具体如下:///<summary>///正则表达式助手///</summary>publicclassRegularHelper{///<summary>......
  • 实现微信支付
    微信支付是微信公众平台提供的一种在线支付服务,可以为用户提供快速、方便、安全的支付体验。而在微信小程序中实现微信支付,则可以为应用程序提供更多的功能和服务,提高用户体验和商业价值。因此,在本文中,我们将介绍如何在微信小程序中实现微信支付。步骤一:申请微信支付接口权限在使用......
  • 微信小程序使用vant组件van-datetime-picker unexpected character `@`
     报错 改成 vue不能直接引用,得定义了或者......
  • 微信公众号如何接入微信机器人
    微信对话开放平台文档官方文档平台简介微信对话开放平台开放了微信在对话领域积累多年的的智能对话技术,开发者及非开发者可简单、快速地搭建智能对话机器人(智能客服),并接入公众号、小程序等,为业务赋能,降本增效。也欢迎你加入开发者社区一起讨论相关问题。按照文档相关指引......
  • Arm NN 成功适配 openEuler Embedded,提供高性能神经网络推理能力
    近期,RISC-VSIG完成了ArmNN在openEulerEmbedded系统的适配,于2023年1月合入系统构建工程代码库,经测试验证可用,实现了神经网络加速库在openEulerEmbedded嵌入式系统上的加速和优化。系统构建工程下载地址:https://gitee.com/openeuler/yocto-meta-openeuler支持ArmN......
  • 微信小程序页面跳转方法总结微信小程序页面跳转方法总结
    微信小程序页面跳转目前有以下方法(不全面的欢迎补充):1.利用小程序提供的API跳转://保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。//注意:调用navigateTo跳转时,调用该方法的页面会被加入堆栈,但是redirectTowx.navigateTo({url:'page/hom......
  • 04.适配器模式
    适配器模式的定义将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式的结构和说明Client:客户端,调用自己需要的领域接口Target。Target:定义客户端需要的跟特定领域相关的接口。Adaptee:已经存......
  • 适配器模式
    TheAdpativedesignpatternconvertstheinterfaceofaclasstoanotherinterfaceclientsexpect.Thisdesignpatternletsclassesworktogetherthatcouldn'totherwisebecauseofincompatibleinterfaces.适配器模式将类的接口转换为客户期望的另外一个接口,这种......