标签（空格分隔）： web前端开发

1. 屏幕尺寸 Screen Size
2. 浏览器尺寸 Window Size
3. 滚动移位 Scrolling Offset
4. 视窗 viewport
5. 度量viewport Measuring the view port
6. 度量 html 元素 measuring the element
7. 事件坐标 Event coordinates
8. Media查询 media queries

在谈下面的各类尺寸之前，我们先理解下 设备 px 与 CSS 的 px，我们常常在调整 CSS 页面样式的时候用上 px 单位，这个大小跟设备的 px 大小一样吗？答案不一定，一般来说，我们的 PC 端浏览器默认缩放为 100% 这个时候 CSS 的 px 大小与设备的 px 就相等，当浏览器缩放的时候，例如缩放为 200%,此时 CSS 的 px 大小是设备 px 的十倍，即 宽度 2、高度 2 。

PC 端

屏幕尺寸 Screen Size

screen.width 与 screen.height
screen.width/height 指的是用户的屏幕设备的完整大小，使用的 px 单位是指设备的 px 。不会因为浏览器的缩放而改变，它们指的是显示器的物理特征，而非浏览器。

浏览器尺寸 Window Size

window.innerWidth 与 window.innerHeight
window.innerWidth/Height 指的是包含滚动条尺寸的浏览器内部窗口的完整尺寸，用的 px 单位是指 CSS 的 px ，浏览器放大缩小的比例等于 window.innerWidth/window.height 。

滚动移位 Scrolling Offset

window.pageXOffset 与 window.pageYOffset
window.pageX/YOffset 指的是页面的移位，即页面相对窗口的水平垂直方向的位移。

但注意一点，当浏览器缩放时，理论上，window.pageX/YOffset 是几乎不变的，这是因为，当用户放大页面时，浏览器会尝试保存用户当前的页面的元素依然在可见范围内。

视窗 viewport

viewPort 的功能在于控制网站最高块状容器: html 元素。
那么 html 元素到底有多宽？原理上来说， html 元素的宽度受 viewport 所限制， html 元素为 viewport 宽度的 100%。也就是说 viewport 是严格地等于浏览器窗口的宽度。

度量 viewport Measuring the view port

document.documentElement.clientWidth 与 document.documentElement.clientHeight

document.documentElement.clientWidth/Height 指的是 viewport 的尺寸，用的是 CSS 的 px。

document.documentElement 实际上就是 html 元素即 HTML 文档的根元素。但是 viewport 是比 html 还要高一个级别的元素，好比是容纳 html 元素的元素。那与上面所提到的 window.innerWidth/Height 的区别是什么呢？这是不同的浏览器对这两个的支持不一样, IE 不支持 window.innerWidth/Height。另外 window.innerWidth/Height 包含滚动条而 window.clientWidth/Height 不包含。

度量 html 元素 measuring the element

document.documentElement.offsetWidth 与 document.documentElement.offsetHeight

document.documentElement.offsetWidth/Height 指的是 html 的尺寸，用的是 CSS 的 px,但 IE 则是以这个表示 viewpor 的尺寸。

事件坐标 Event coordinates

pageX 与 pageY, clientX 与 clientY, screenX 与 screenY

• pageX/Y 指的是从 html 原点到事件触发点的 CSS 的px
  
• clientX/Y 指的是从 viewport 原点到事件触发点的 CSS 的px
  
• screenX/Y 指的是从设备原点到事件触发点的设备的px
  

Media查询 media queries

width 与 height, device-width 与 device-height

• width/height 使用 documentElement.clientWidth/Height 为标准 (CSS 的 px)
• device-width/height 使用 screen.width/height 为判定标准 (设备的 px)

移动端

viewport

移动端的 viewport 中有两个概念： layout viewport 与 visual viewport .
layout viewport 指的是整个页面的大小，不同浏览器的默认 layout viewport 的大小不一样，一般手机浏览器默认宽度为 980px,而 visual viewport 则相当于你在手机上面所能看到的范围就是当前显示在屏幕上的部分页面，visual viewport 的尺寸可以通过缩放浏览器而改变，但 layout viewport 的宽高是不会受缩放而改变的。
而 CSS 的布局一般都是按照 layout viewport 来定义。

度量 layout viewport

document.documentElement.clientWidth 与 document.documentElement.clientHeight

在移动端里面这就是指 document.documentElement.clientWidth/Height 指的是 layout viewport 的大小，也就是这个页面的大小。另外缩放不影响 layout viewport 的大小，旋转屏幕也只是影响 layout viewport 的高度。

度量 visual viewport

window.innerWidth 与 window.innerHeiht
移动端里面，window.innerWidth/Height 指的是 visual viewport 的尺寸，也就当前显示在屏幕上的部分页面，缩放浏览器，这个值会改变，意味着更多或更少的 CSS px 放进了屏幕里面。

屏幕 Screen

screen.width 与 screen.height
屏幕的尺寸,，物理属性，以设备 px 作为度量的大小。

滚动移位 scrolling offset

window.pageXOffset 与 window.pageYOffset

当前 visual viewport 相对 layout viewport 的水平垂直位移.

html 元素

document.documentElement.offsetWidth 与 document.documentElement.offsetHeight
与 PC 端一样，在移动端里指的是 html 元素的整体尺寸，以 CSS px 为度量。

媒体查询 media queries

与 PC 一样，有 width/height 反映 document.documentElement.clientWidth/Height 的值，device-width/height 反映 screen.width/height 的值。
也就是：
width/height 使用的是 layout vieport
device-width/height 使用的是 device screen

事件坐标 Event Coordinates

• pageX/Y: 基于页面的 CSS px, 指的是从 layout viewport 原点到当前事件发生的触发点的距离
  
• clientX/Y: 基于 CSS px, 指的是从 visual viewport 原点到当前事件发生的触发点的距离。
• screenX/Y: 则是基于设备 px,指的是从 visual viewport 原点到当前事件发生的触发点的距离。
  

dpr（设备像素/css 像素）

我们通篇提到的 设备 px 与 CSS px，当手机屏幕的 dpr == 1 是，它们才会相等。
另外插放一张图(摘自 http://www.jianshu.com/p/221bebfae266)：

参考自： http://www.w3cplus.com/css/viewports.html