(() => {
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let width = document.documentElement.clientWidth;
let Obody = document.documentElement;
Obody.style.width = width + 'px';
let newSize = () => {
Obody.style.fontSize = (width / 19.2 * 1.25) + 'px'
}
window.addEventListener(resizeEvt, newSize, false);
newSize();
})()
(() => {
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let height = document.documentElement.clientHeight;
let Obody = document.documentElement;
Obody.style.height = height + 'px';
let newSize = () => {
Obody.style.fontSize = (height / 375) + 'px'
}
window.addEventListener(resizeEvt, newSize, false);
newSize();
})()
不用width的原因是兼容华为的容颜系列手机
荣耀系列手机他的body高度和屏幕高度一样。
屏幕高度包含了最下面那个黑色的按键区域。
但是容器如果和body一样高的话，对于刚好占满一屏幕的页面，
最下面会有一部分被黑色的按键挡住。
博主联系方式:
- 微信：34419369
- QQ: 34419369
- 公众号：前方录
- 有什么不懂的地方欢迎联系我，帮到你是我会很开心