最近遇到了一些问题,总结一下
X5内核的rem貌似有一个极小值
复现方式
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附近来判断是否进行了文字大小缩放。如果有缩放,提前除倍数即可。
(() => {
const width = document.documentElement.clientWidth
const height = document.documentElement.clientHeight
const radio = width / height
// let fontSize = radio > .9 ? '70vh' : '100vw'
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`
}
})()
本文由 hunsh 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Jun 14, 2021 at 12:56 pm