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匹配手机屏幕横竖状态
Jan 27 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 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获取url的函数代码
2011/08/02 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
javascript实现日历效果
2019/06/17 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python学习数据结构实例代码
2015/05/11 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
python能否java成为主流语言吗
2020/06/22 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Python类型转换的魔术方法详解
2020/12/23 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
八项规定整改措施
2014/02/12 职场文书
统计员岗位职责范本
2015/04/14 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android