问题记录:
20210118,记录一下一个小问题,收到来自同事的bug反馈,说我们的H5页面,在微信内置浏览器下显示有问题,然后丢了个图过来,发现里面文字很大,文字的位置也有点偏移,立刻联想到是用户把字体调大了,变成“老年模式”。这里我随便找个页面重现下类似的错乱效果,如下图
简单写了个测试页面(rem布局),拿安卓和 ios 分别测了下,如下动图
从上面两张动图可以发现:
1. 安卓手动调整字体的话,会使根元素的字体变化,导致整个页面内的元素的一些属性变化,包括宽高字体等样式属性
2. ios 手动调整字体,只是单纯的把文字的字体改变,并没有改变根元素字体
从上面的发现,我们的页面相对于 ios 来说,如果页面不复杂,在安卓下,显示一般不会有太大异常,只是看到了页面所有的元素都是被放大了。而在 ios 下,在一些元素定宽定高,并且加了 overflow:hidden 这样的样式属性,则调整字体可能会出现文字被切割了,只显示文字的一部分,就像这样: ios下调大字体后→ ,不知道的人还以为是 “天汪”