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