BOM中获取窗口大小

窗口大小获取

/*
 * 标签 ： innerWidth、innerHeight、outerWidth、outerHeight
 * 浏览器 ： IE9+、Firefox、Safari、Opera、Chrome
 * 常规：outerWidth、outerHeight 返回浏览器窗口本身的尺寸
 *      innerWidth、innerHeight 返回视图区大小（不含边框）
 * 特例：Opera 中两个都返回页面视图容器的大小（单个标签页对应的浏览器窗口）
 *      Chrome 与Opera刚好相反，两个都返回视口大小 （非浏览器窗口大小）
 * */

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
/* 先判断 */
if( typeof(pageWidth) != "number"){
    if (document.compatMode == "CSS1Compat") {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

 扩展：

resizeTo( x, y)：调整到（ x, y）大小

resizeBy( x, y)：在原大小的基础上调整

注意：这两个方法可能会被浏览器禁用。

 

扩展链接：offset[Parent/Width/Height/Top/Left] 、 client[Width/Height/Top/Left] 、 Element.getBoundingClientRect()

Javascript中与Scroll有关的方法