相思资源网 Design By www.200059.com

问题记录:

       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右键菜单调整字体页

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

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

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。