Window 对象视图属性

这些属性可以 hold 住整个浏览器窗体大小。微软则将这些 API 称为 Screenview 接口。

浏览器宽高

window.outerWidthwindow.outerHeight 表示整个浏览器的宽高(以像素为单位),包括侧边栏(如果存在)、窗口镶边(Window Chrome)和窗口调正边框,包含调试窗及浏览器边框。

浏览器宽高

使用如下示例代码:

window.outerHeight;
window.outerHeight;

outterWidthoutterHeight 属性为只读属性,没有默认值。

浏览器网页视口宽高

window.innerWidthwindow.innerHeight 表示浏览器网页视口的宽高,如果存在垂直/水平滚动条,则包括它,不包括调试窗及浏览器边框。

浏览器网页视口宽高

使用如下示例代码:

window.innerWidth;
window.innerHeight;

innerWidthinnerHeight 属性为只读属性,没有默认值。

浏览器距屏幕边距

window.screenLeftwindow.screenTop 分别表示浏览器网页视口的左上角的 X / Y 坐标,该属性为只读属性。(注:在 Firefox 等浏览器中使用的是 screenXscreenY 属性)

使用如下示例代码:

window.screenLeft;
window.screenTop;

浏览器网页视口滚动偏移

window.pageXOffsetwindow.pageYOffset 表示当前页面相对于网页视口显示区左上角的 X / Y 坐标。

使用如下示例代码:

window.pageXOffset;
window.pageYOffset;

总结

属性说明
window.outerWidth浏览器网页视口外层宽度
window.outerHeight浏览器网页视口外层高度
window.innerWidth浏览器网页视口内层宽度
window.innerHeight浏览器网页视口内层高度
window.screenTop浏览器距屏幕上边距
window.screenLeft浏览器距屏幕左边距
window.pageXOffset当前页面距网页视口显示区上边距
window.pageYOffset当前页面距网页视口显示区左边距