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

问题记录：

       20210118，记录一下一个小问题，收到来自同事的bug反馈，说我们的H5页面，在微信内置浏览器下显示有问题，然后丢了个图过来，发现里面文字很大，文字的位置也有点偏移，立刻联想到是用户把字体调大了，变成“老年模式”。这里我随便找个页面重现下类似的错乱效果，如下图

         简单写了个测试页面（rem布局），拿安卓和 ios 分别测了下，如下动图

从上面两张动图可以发现：

       1. 安卓手动调整字体的话，会使根元素的字体变化，导致整个页面内的元素的一些属性变化，包括宽高字体等样式属性

       2. ios 手动调整字体，只是单纯的把文字的字体改变，并没有改变根元素字体

       从上面的发现，我们的页面相对于 ios 来说，如果页面不复杂，在安卓下，显示一般不会有太大异常，只是看到了页面所有的元素都是被放大了。而在 ios 下，在一些元素定宽定高，并且加了 overflow:hidden 这样的样式属性，则调整字体可能会出现文字被切割了，只显示文字的一部分，就像这样： ios下调大字体后→ ，不知道的人还以为是 “天汪”