一、window.innerWidth和window.innerHeight

概念:计算浏览器窗口的内部高度(不包括工具栏和滚动条)。
通俗的来讲:整个浏览器中能够显示网页内容的部分。
特殊情况

  1. 滚动条:减去滚动条部分,滚动条宽度15px;
  2. 开发者工具:比如firebug,如果开发者工具处于打开的情况,在当前情况计算的innerHeight数值是不包括开发者工具所占高度。

safari-client

var windowSize = {
    width : function () {
        return window.innerWidth 
            || document.body.clientWidth 
            || document.documentElement.clientWidth;
    },
    height : function () {
        return window.innerHeight 
            || document.body.clientHeight
            || document.documentElement.clientHeight;
    }
};
console.log(windowSize.width());
console.log(windowSize.height());

二、availWidth和availHeight

概念:计算用户电脑屏幕的可用宽、高,不包括任务栏。
特殊情况

  1. Mac OS系统中,需要去除上、下两部分;
  2. Mac OS系统中,使用QQ截图,默认选中区域 availHeight 测量出来少了6px,我猜想是由于窗口的阴影部分没有截取;
  3. Window系统中,需要去除下放的任务栏。

screen

这里未发现兼容性问题

console.log(screenSize.availWidth());
console.log(screenSize.availHeight());

标签: javascript

添加新评论