screenLeft、screenTop属性
-
screenLeft、screenTop分别用于表示窗口相对于屏幕左边和上边的位置。
console.log("window.screenLeft = " + window.screenLeft); //51
console.log("window.screenTop = " + window.screenTop); //24
263589321.jpg
-
有些浏览器可能不支持上边的两个属性，但支持
screenX、screenY属性。所以，跨浏览器取得窗口左边和上边的位置用如下代码：
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; -
如果将视图区（如下图）最大化，此时的
screenLeft、screenTop均为0.
最大化视图区.png
innerWidth、innerHeight、outerWidth、outerHeight属性
-
outerWidth、outerHeight：返回浏览器窗口本身的尺寸（包括窗口标题、工具栏、状态栏等）。
innerWidth、innerHeight：表示容器中页面视图区的大小（包括滚动条）。
来自网络图片.png
-
对于
Chrome来说，outerWidth、outerHeight与innerWidth、innerHeight返回相同的值，即视口的大小。 -
在不支持
window.innerHeight的浏览器中，可以通过以下方法读取页面视口的大小， 它们的大小和window.innerHeight是一样的（其实不太一样）：
document.documentElement.clientWidth
document.body.clientWidth所以，跨浏览器获取页面视口大小代码如下：
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; } } -
三者大小关系：
-
window.innerHeight包括整个DOM：内容、边框以及滚动条。 -
documentElement.clientHeight不包括整个文档的滚动条，但包括<html>元素的边框。 -
body.clientHeight不包括整个文档的滚动条，也不包括<html>元素的边框，也不包括<body>的边框和滚动条。
参考文档：
视口的宽高与滚动高度
网友评论