获取宽高兼容写法(暂未理解感觉实际只用到了第一个,用这感觉不是太low)
问题描述
获取当前屏幕可视化宽高,盒模型宽高跟获取到的有1-20(px)的差距,导致画布计算与实际展示差异出现布局问题(修改前人代码)
getWid_Hei() {
let width, height;
if (window.innerWidth) {
width = window.innerWidth;
height = window.innerHeight;
console.log('1', width, height);
} else if (document.compatMode === "BackCompat") {
width = document.body.clientWidth;
height = document.body.clientHeight;
console.log('2', width, height);
} else {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
console.log('3', width, height);
}
return {
w: width,
h: height
}
},
解决方法(根index.html页面修改)
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}