移动端页面字体缩放问题处理

[ 移动端浏览器会缩放字体导致页面布局变化 ]

ps: 这个问题弄得我整个人都不好了，移动端浏览器可以设置字体缩放，而且不同浏览器不同设备默认缩放程度不同。

• 仔细观察页面，就会发现也不是所有的字体都会被缩放。
• 经过反复对比发现，提供了宽高数值，并且设置了flex布局的文字就不会被缩放，无论怎么设置字体缩放，都不会影响到布局。
• 统一解决方案，在页面外层套两层容器div，div宽度就是页面宽度，默认给outer容器一个非常大的高度值，比如说30000px，inner容器给定宽度，但是不给定高度。
• 因为outer容器设定了宽度和高度，这样页面内的字体就不会被缩放，outer高度足够大，就不会导致页面内容显示不全。这样得到的inner的实际高度尺寸才准确。
• 然后当页面挂载，也就是onMounted函数内部，获取inner容器的offsetHeight，并且将此高度值赋值给outer。outer设定ouerflow时hidden。这样就可以了。
• 或许会疑问，直接给文字元素相应的高度不就好了吗？一方面是麻烦，而方面是有些文本是后端获取的，根本就不知道有多少字，无法预先计算出高度数值。
• 如果发现有些字体不会缩放了，但是有些还是会被缩放，那么检查一下，是不是给了flex布局。其他布局我没有测试，flex布局是没有问题的。