首页 > 其他分享 >微信 H5 页面兼容性——适配用户修改微信客户端字体大小

微信 H5 页面兼容性——适配用户修改微信客户端字体大小

时间:2023-09-13 15:23:09浏览次数:69  
标签:网页 微信 WeixinJSBridge 字体 适配 字体大小

关于微信安卓端网页字体适配的通知 微信安卓版 7.0.10 版本起,网页的字体会跟随微信设置里的字体大小更改而变化。

当用户修改微信客户端字体大小后,微信公众号网页的适配就会变得非常繁琐,Android 系统设备有 8 级字体大小,IOS 系统设备有 7 级字体大小,尤其将字体放大到最大一级后,页面会出现布局错乱的问题。

我通过将 Android 系统设备微信的字体设置到最大后,查看了小米购物车页面:

小米商城购物车页面-标准字体

左侧是小米商城购物车页面-标准字体,右侧是超大字体。字体变大后页面显示错乱了。

并非没有做适配,字体太大,页面适配会变得非常繁琐,尤其当页面元素过多时。


微信 H5 作为在手机上打开的网页,可以设置最大宽度,并且在大屏幕上(微信桌面端打开公众号网页)显示在屏幕中间,具体可以参考微信的公众号文章页面的宽度:677px。并限制微信字体修改对网页的影响。

微信公众平台提供了 WeixinJSBridge,它是一个用于微信网页开发的 JavaScript 接口库。它能够让网页获得一些跟微信原生的 API 交互的能力,如调用微信客户端的 API。使用 WeixinJSBridge 可以为网页开发带来更多的功能和交互性,让用户体验更加流畅。

可以通过 WeixinJSBridge 来实现限制微信字体修改对网页的影响。只需将字体大小等级设置为 2 (标准)即可:

(function () {        
  if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
    // 在微信环境下(微信客户端,微信桌面端,微信开发者工具)
    onSetFontSize();
  } else {
    // 没在微信环境下
    // 在 WeixinJSBridge 加载完成后再调用相关的 API,监听 WeixinJSBridgeReady 事件
    document.addEventListener('WeixinJSBridgeReady', onSetFontSize, false);
  }
  function onSetFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: '2' });
  }
})();

针对 IOS 系统设备,需要调整样式:

因为缩放适配小屏幕而导致文字会变得很小,许多手机浏览器会使用文本溢出算法放大文本,改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度,该算法会增加文本大小,但是不会修改布局。text-size-adjust 这个属性允许开发者去除或者修改浏览器的这种行为,比如,当网页已经适配了小屏幕之后,就不需要这么做了。需要为想要实现的浏览器加上前缀。

html {
-webkit-text-size-adjust: 100% !important;
     -moz-text-size-adjust: 100% !important;
          text-size-adjust: 100% !important;
}

参考网址:

text-size-adjust
关于微信安卓端网页字体适配的通知
WeixinJSBridge完全指南

标签:网页,微信,WeixinJSBridge,字体,适配,字体大小
From: https://www.cnblogs.com/xinjie-just/p/17699622.html

相关文章

  • 大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自
    原文链接:https://blog.csdn.net/weixin_41192489/article/details/120004315大屏自适应的核心目标有:字体大小随屏幕尺寸自适应变化详见下文自动撑满全屏设置如下.bg{background:url("~@/assets/images/主背景.png");position:fixed;top:0;left:0;wi......
  • 基于微信小程序的学生活动管理系统
    由于APP软件在开发以及运营上面所需成本较高,而用户手机需要安装各种APP软件,因此占用用户过多的手机存储空间,导致用户手机运行缓慢,体验度比较差,进而导致用户会卸载非必要的APP,倒逼管理者必须改变运营策略。随着微信小程序的出现,解决了用户非独立APP不可访问内容的痛点,所以很多APP软......
  • 基于微信小程序的医院挂号系统设计与实现+ssm
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了医院挂号系统小程序的开发全过程。通过分析医院挂号信息管理的不足,创建了一个计算机管理医院挂号信息的方案。文章介绍了医院挂号系统小程序的系统分析部分,包括可行性分析等,系统设计部......
  • 基于微信小程序的房屋租赁管理系统
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了基于微信小程序的房屋租赁管理系统的开发全过程。通过分析基于微信小程序的房屋租赁管理系统管理的不足,创建了一个计算机管理基于微信小程序的房屋租赁管理系统的方案。文章介绍了基于......
  • 基于微信小程序的公交信息在线查询系统
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序公交信息在线查询系统的开发全过程。通过分析微信小程序公交信息在线查询系统信息管理的不足,创建了一个计算机管理微信小程序公交信息在线查询系统信息的方案。文章介绍了微......
  • 基于微信小程序的外卖点餐的设计与实现
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序外卖点餐的设计与实现的开发全过程。通过分析微信小程序外卖点餐的设计与实现管理的不足,创建了一个计算机管理微信小程序外卖点餐的设计与实现的方案。文章介绍了微信小程序......
  • 基于微信小程序的社区互助养老
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序社区互助养老的开发全过程。通过分析微信小程序社区互助养老管理的不足,创建了一个计算机管理微信小程序社区互助养老的方案。文章介绍了微信小程序社区互助养老的系统分析部......
  • 2023-09-12 关于微信小程序在ios端iphone X以上机型的导航栏高度
    完整代码://获取胶囊信息letmenuButtonObject=wx.getMenuButtonBoundingClientRect();uni.getSystemInfo({success:function(res){this.navHeight=res.statusBarHeight+menuButtonObject.height+(menuButtonObject.top-res.statusBarHe......
  • 微信公众号h5调用微信支付
    微信公众号h5调用微信支付其实就是JSAPI支付目前jsapi支付分v2和v3,现在尽量接v3的api。因为v2前端调用wx.chooseWXPay的时候成功没有回调,导致后续业务逻辑跳转有问题(原因就是可恨的点金计划)点金计划就是支付成功之后跳转到一个官方小票+广告的页面,点金计划开通的门槛稍微有点高,......
  • USB适配器应用芯片 国产GP232RL软硬件兼容替代FT232RL DPU02直接替代CP2102
    USB适配器,是英文UniversalSerialBus(通用串行总线)的缩写,而其中文简称为“通串线”,是一个外部总线标准,用于规范电脑与外部设备的连接和通讯。是应用在PC领域的接口技术,移动PC由于没有电池,电源适配器对其尤为重要。今天来讲讲USB适配器的国产适用芯片。一、GP232RL,直接软硬件......