最近遇到了一些问题，总结一下
X5 内核的 rem 貌似有一个极小值
复现方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
html {
font-size: 1vw;
}
body {
background: #555;
width: 100rem;
height: 100vh;
}
|
页面宽度会超出一个屏幕宽度，而且很多！
如果用户在微信内调整了字体大小，会导致 font-size 成比例变化
比如字体调整为标准+1 档，<html style="font-size: 100px">的实际 font-size 将变成110px。
有一些场景是不能够允许字体变化的，所以需要特殊处理
我们可以计算期望的属性值，然后在赋值后通过Window.getComputedStyle获得实际属性，通过倍率是否在 1 附近来判断是否进行了文字大小缩放。如果有缩放，提前除倍数即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
(() => {
const width = document.documentElement.clientWidth
const height = document.documentElement.clientHeight
const radio = width / height
const expected = radio > .9 ? .7 * height : width
const real = parseInt(window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.split('p')[0])
const multi = (real / expected).toFixed(2)
if (Math.abs(multi - 1) > 0.08) {
document.getElementsByTagName("html")[0].style.fontSize = radio > .9 ? `${70*multi}vh` : `${1070*multi}vw`
}
})()
|