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制作的20种loading动效
Jul 05 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
css3 选择器
May 11 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
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
Python实现list反转实例汇总
2014/11/11 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
日语翻译个人求职的自我评价
2013/10/14 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
js作用域及作用域链工作引擎
2022/07/07 Javascript
python如何将mat文件转为png
2022/07/15 Python