- 标准模式和混杂模式
1.浏览器在渲染网页的时候有两种模式"标准模式"和"混杂模式"
2.默认情况下都是以标准模式来进行渲染的(CSS1Compat)
3.如果网页没有书写文档声明, 那么就会按照"混杂模式"来进行渲染的(BackCompat)
4.使用document.compatMode可以获取网页的渲染模式
- 获取网页宽高
IE9及以上浏览器使用innerWidth/innerHeight获取网页可视区域的宽高
// console.log(window.innerWidth);
// console.log(window.innerHeight);
IE8以下浏览器
1.混杂模式
document.body.clientWidth和document.body.clientHeight
2.标准模式
document.documentElement.clientWidth和document.documentElement.clientHeight
兼容浏览器的获取网页宽高的函数
function getScreen() {
let width, height;
if(window.innerWidth){ //ie9及以上
width = window.innerWidth;
height = window.innerHeight;
}else if(document.compatMode === "BackCompat"){ //混杂模式
width = document.body.clientWidth;
height = document.body.clientHeight;
}else{ //标准模式
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height
}
}