window——窗口定位与尺寸

window.innerHeight 与 window.outerHeight

window.innerHeight

浏览器窗口的视口(viewport)高度(以像素为单位),如果存在水平滚动条,则包括它。
只读

window.outerHeight

Window.outerHeight 获取整个浏览器窗口的高度(单位:像素),包括侧边栏(如果存在)、窗口镶边(window chrome)和窗口调正边框(window resizing borders/handles)。
只读,没有默认值

在Chrome浏览器下,任意窗口大小,表示图片如下:


outerHeight就是整个浏览器了的高度了,这里需要注意的是,innerHeight的高度在最下面是不包括边框的,但是包括滚动条。

还有一点,在F11全屏后,outerHeight反而不能准确表示。


window.innerWidth 与 window.outerWidth

全屏情况下,innerWidth与outerWidth相等。

窗口模式下则需要区分边框宽度。

感到困惑的是,f11全屏下,outerWidth呈现出了和innerWidth不一样的数值

经过粗略测量,Chrome的水平方向的两个边框宽度为8像素,或许在全屏模式下,有别的测算方式。


scrollX、scrollY

返回浏览器左边界到操作系统桌面左边界的水平距离和浏览器顶部距离系统桌面顶部的垂直距离。

这个就很好理解了,以浏览器左上角为原点,进行Desktop定位嘛。

PS大致测量

对于窗口最大化,自然而然就是原点坐标了。

如果在F11下,则得到一个很奇怪的坐标

你可能感兴趣的:(window——窗口定位与尺寸)