查看视口的尺寸
window.innerWidth/innerHeight----IE8及IE8以下不兼容
document.documentElement.clientWidth/clientHeight--标准模式下,任意浏览器都兼容<!doctype html>
document.body.clientWidth/clientHeight--适用于怪异模式下的浏览器(即去掉(!doctype html)
document.compatMode兼容。CSS1Compat标准模式下----/BackCompat向后兼容怪异模式下
切换Dock side才能看到横向和纵向的尺寸
// 没有横向滚动条的时候两者相等window.innerWidth=document.documentElement.clientWidth,但是加上横向滚动条后就不一样了
封装兼容性方法,返回浏览器视口尺寸getViewportOffset()
function getViewportOffset(){
if(window.innerWidth){
return{
w:window.innerWidth,
h:window.innerHeight
}
}else{
if(document.compatMode == "BackMode"){
return{
w:document.body.clientWidth,
h:document.body.clientHeight
}
}else{
return{
w:document.documentElement.clientWidth,
h:document.documentElement.clientHeight
}
}
}
}