为了使表格或者一些数据能能够自适应浏览器的宽度或者高度,就不可避免的要获取浏览器的尺寸

电脑屏幕尺寸的获取方式

window.screen.height //获取电脑屏幕分辨率的高度
window.screen.width //获取电脑屏幕分辨率的宽度


window.screen.availHeight // 获取电脑屏幕的有效高度(例如 出去任务栏,有顶部栏的也会除去)
window.screen.availWidth //获取电脑屏幕的有效宽度

获取电脑屏幕的宽度或者高度是不用去考虑 兼容模式的问题
那必然 获取浏览器的尺寸就一定要注意兼容模式的问题

浏览器中尺寸(高度、宽度、滚动条高度)的获取方式

document.body.clientHeight //获取浏览器的body对象的高度
document.body.clientWidth //获取浏览器的body对象的宽度


document.documentElement.clientHeight // 获取浏览器的可见高度
document.documentElement.clientHeight //获取浏览器的可见宽度

由于历史原因 ,浏览器对页面的渲染会存在两种模式:

1 标准模式 旧的渲染方法(ie)

2 兼容模式 W3C标准规范
两种模式由于计算方式不同 获取同一个容器的高度和宽度 会根据 margin border padding 有一定区别

这个标签如果设置了就是兼容模式 会按照w3c的标准去解析html页面 但是如果没有设置会按照 backCompat 也就是标准模式 又称怪异模式(不同的浏览器会按照自己的解析方式去解析)这种就会在不同的浏览器中出现不可知的问题!

一般获取尺寸是要考虑兼容:

//获取浏览器的高度
function getClientHeight(domId){
    //domId 为当前容器的id
    var roolEl;//设置一个临时变量
    if(domId = null){
    //document.compatMode用来获取当前浏览器的模式
    //CSS1Compat 为兼容模式 W3c指定 
        roolEl = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
    }else{
        roolEl = document.ElementById(domId);//获取指定容器的对象
    }
    var rootHd = parentInt(roolEl.clientHeight);//获取当前容器的高度
    return rootHd;//返回当前容器高度数据



}

宽度的获取和高度差不多 使用 clientWidth即可;

参考资料:

document.body.clientHeight 和 document.documentElement.clientHeight 的区别

依水间的博客:document.compatMode介绍

【DOCTYPE】兼容模式和标准模式

doctype的作用

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐