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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
lib.utf.js
2007/08/21 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
微信QQ的二维码登录原理js代码解析
2016/06/23 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
Vue header组件开发详解
2018/01/26 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python网络编程详解
2017/10/31 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Pyqt5自适应布局实例
2019/12/13 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
ktv好的活动方案
2014/08/15 职场文书
会计工作能力自我评价
2015/03/05 职场文书
公司酒会致辞
2015/07/30 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python