尺寸与位置
Miaoxingren
5月 31, 2017
以下属性都以CSS像素为单位，在大多数浏览器中都能返回正确值。
尺寸
screen.width/height
该属性表示输出设备/屏幕的宽度/高度。该属性会受以下因素影响：
- 设备方向，landscape或portrait
- 设备像素比DPR
以iPhone 4为例，其分辨率为640x960，屏幕宽度为640个物理像素，设备像素比为2，则以CSS像素表示屏幕宽度为320，所以screen.width为320。
device-width/height
该属性相当于screen.width/height，主要用于媒体查询和viewport元标签。
window.innerWidth/innerHeight
该属性表示视觉视口的宽度/高度，包括滚动条在内。在桌面浏览器中，就是浏览器可视区域的宽度/高度。该属性会受以下因素影响：
- 设备方向，landscape或portrait
- 页面缩放比例
document.documentElement.clientWidth/clientHeight
该属性表示布局视口的宽度/高度，不包括滚动条在内。在桌面浏览器中，就是浏览器可视区域的宽度/高度。该属性会受以下因素影响：
- 设备方向，landscape或portrait
document.documentElement.offsetWidth/offsetHeight
该属性表示<html>元素的宽度/高度，不包括滚动条在内。该属性会受以下因素影响：
- 设备方向，landscape或portrait
如果不通过CSS对<html>元素的大小进行设置，则该属性会返回布局视口的宽度/高度，也就是document.documentElement.clientWidth/clientHeight，此时属性就会受设备方向影响。
Media Query
width/height
指的是布局视口的宽度/高度，和documentElement.clientWidth/clientHeight的值相等。
device-width/device-height
指的是设备屏幕的宽度/高度，和screen.width/height的值相等。
位置
window.pageX/YOffset或window.scrollX/Y
该属性表示文档水平/垂直方向的滚动距离，也就是视觉视口相对于布局视口的滚动距离。该属性不受设备方向或缩放影响。
MouseEvent
pageX/Y
该属性表示相对于<html>元素的坐标。
clientX/Y
该属性表示相对于视觉视口的坐标。
screenX/Y
该属性表示相对于屏幕的坐标，先获得物理像素表示的坐标，再根据设备像素比转换为CSS像素坐标。
参考文章