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 21 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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的可变变量名需要的注意的问题
2013/06/20 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
Javascript的一种模块模式
2008/03/22 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
一个超级简单的python web程序
2014/09/11 Python
决策树的python实现方法
2014/11/18 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python中格式化format()方法详解
2017/04/01 Python
python中的二维列表实例详解
2018/06/19 Python
python3.7.0的安装步骤
2018/08/27 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
财务会计应届生求职信
2013/11/24 职场文书
上班离岗检讨书
2014/01/27 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
开服装店计划书
2014/08/15 职场文书
银行工作心得体会范文
2016/01/23 职场文书
Nginx报404错误的详细解决方法
2022/07/23 Servers