HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题


Posted in HTML / CSS onJanuary 19, 2021

问题记录:

       20210118,记录一下一个小问题,收到来自同事的bug反馈,说我们的H5页面,在微信内置浏览器下显示有问题,然后丢了个图过来,发现里面文字很大,文字的位置也有点偏移,立刻联想到是用户把字体调大了,变成“老年模式”。这里我随便找个页面重现下类似的错乱效果,如下图

HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题 

 

这是随便扫的一个页面,调大字体后的显示效果 测试案例以及简单的推断:

         简单写了个测试页面(rem布局),拿安卓和 ios 分别测了下,如下动图

HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
安卓
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
ios

从上面两张动图可以发现:

       1. 安卓手动调整字体的话,会使根元素的字体变化,导致整个页面内的元素的一些属性变化,包括宽高字体等样式属性

       2. ios 手动调整字体,只是单纯的把文字的字体改变,并没有改变根元素字体

       从上面的发现,我们的页面相对于 ios 来说,如果页面不复杂,在安卓下,显示一般不会有太大异常,只是看到了页面所有的元素都是被放大了。而在 ios 下,在一些元素定宽定高,并且加了 overflow:hidden 这样的样式属性,则调整字体可能会出现文字被切割了,只显示文字的一部分,就像这样:HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题 ios下调大字体后→HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题 ,不知道的人还以为是 “天汪”?

 解决办法:

       通过搜索工具查找相关内容,发现微信有一个可以覆盖菜单里面“调整字体”功能的接口,不过我找了一下暂时没有找到文档入口,尤其是这个 setFontSizeCallback 希望有知道的可以说一下

(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 (e) {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 });
    });
  }
})();

       上面这部分的代码我测试后,对 ios 和安卓有效果,在调整字体里面,拖动滑块,并没有对页面产生影响。

       在 ios 下还可以使用这个 css 属性

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

       这个属性(实验性功能),设置为100%,是为了关闭字体大小自动调整功能。一般来说,安卓和 ios 的浏览器,当我们横向或者纵向显示时,浏览器会自己改变当前字体,以达到一个方便阅读的效果。所以设置为100%,保持不变 (个人理解)。MDN对这个样式属性的一些说明:https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust

解决后的效果

       加入那些代码后,安卓和 ios 均不会受右上角菜单的“调整字体”功能的影响,如下图所示

HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题 

安卓

HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题  

ios

到此这篇关于HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题的文章就介绍到这了,更多相关html5微信内置浏览器调整字体页面错乱内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 #HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 #HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 #HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 #HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 #HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 #HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 #HTML / CSS
You might like
1.PHP简介
2006/10/09 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
vue3.0 上手体验
2020/09/21 Javascript
python实现kMeans算法
2017/12/21 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python 如何快速复制序列
2020/09/07 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
如何提高MySql的安全性
2014/06/19 面试题
总经理秘书工作职责
2013/12/26 职场文书
法律进机关实施方案
2014/03/12 职场文书
荆州古城导游词
2015/02/06 职场文书
董事长岗位职责
2015/02/13 职场文书
办公室岗位职责范本
2015/04/11 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python