在这篇文章里，将会解释视窗(viewports)和各种重要元素(例如元素)的宽度是如何工作的，同样也会解释浏览器窗口(window)和屏幕(screen)的宽度问题。
概念：设备的pixels和CSS的pixels
首先你应当理解CSS的pixels，以及它和设备的pixels的区别。
我们姑且认定设备的pixels为正确(标准)的pixels宽度。这些pixels决定了你工作所用的那些设备上正式的分辨率。在大多数情况下，能够从screen.width/height上取出具体值。
如果您给某个元素指定一个width: 128px，并且您的显示器的宽度为1024px，并且最大化了浏览器的屏幕，则该元素将在您的显示器上放置八次(理想化假设元素display：inline-block，不换行的情况下能够放置八个该宽度的元素)。
如果用户缩放(zoom)了浏览器，当然必须改变计算方式。例如用户缩放了200%，显示器只能横排容纳4个上诉元素了。
现代浏览器上的缩放，是基于“伸展”pixels。结果是，html元素上的宽度并没有因为缩放200%而由128pix变成256px，而是真实的pixels的被计算成了双倍。html元素在形式上依然是128CSS的pixels，即便它占用了256设备的pixels
。
换言之，缩放200%将一个单位的CSS的pixels变成了4倍的设备的pixels那么大，即宽度 * 2、高度 *
2，面积扩大了2 * 2.
下列图片将清楚的解释这个概念。如图有4个1像素，缩放为100%的html元素，CSS的pixels完整的和设备的pixels重叠。
现在让我们缩小浏览器。CSS的pixels开始缩小，这意味着一个单位的设备的pixels现在与几个CSS的pixels重叠。
如果放大，情况则相反。CSS的pixels开始增长，现在一个CSS的pixels与几个设备的pixels重叠。
总体而言，你只需要关注CSS的pixels，这些pixels指定你的样式被如何渲染。
设备的pixels几乎对你毫无用处。但对用户而言却不是这样。用户会缩放页面，直到他能舒服的阅读内容。但是你不需关心这些缩放级别。浏览器会自动的保证你的CSS的pixels会被伸展还是收缩。
100％缩放
现在我们有严格地定义，假设缩放比例为100％：
在100％缩放级别下，一个CSS像素(pixel)等于一个设备像素(pixel)。
100%缩放的概念非常有利于表述接下来的内容，但你不必在日常工作中过度担忧这个问题。在桌面系统上，你通常会在100%缩放级别下测试你的网站，但即便用户缩放，CSS的pixels的魔法依然能保证你网站外观保存相同的比例。
屏幕尺寸 (Screen size)
我们先了解screen.width 和 screen.height这两个属性的尺寸。这两个属性包含了用户屏幕的完整宽度高度。这些尺寸使用设备的pixels来定义，他们的值不会因缩放而发生改变，因为他们是显示器的特征，而不是浏览器。
很有趣吧？但是这个属性有何用呢？
基本上没有。用户的屏幕大小对我们来说并不重要，除非您想用于Web统计数据。
screen.width/height
含义：用户屏幕的完整大小。
度量：设备的pixels。
兼容性问题：IE8里，不管使用IE7模式还是IE8模式，都以CSS的pixels来度量。
浏览器尺寸 (Window size)
相反的，你想要知道的浏览器的内部尺寸。它定义了当前用户有多大区域，可供你的CSS布局占用。你可以通过window.innerWidth 和 window.innerHeight来获取。
显然，窗口的内部宽度使用CSS的pixels为单位。您需要知道可以将多少数量的元素塞进浏览器窗口中，并且该数量随着用户放大而减少。所以当用户放大显示时，你能获取的浏览器窗口可用空间会减少，并通过window.innerWidth/Height的值的减小来反映出来。
( Opera浏览器在这个问题上是一朵奇葩，当用户放大浏览器显示时不少。所以当用户放大显示时，你能获取的浏览器窗口可用空间会减少。window.innerWidth/Height 却并不会减小。在桌面浏览器上，这个特性很烦人，但在移动设备浏览器上简直是致命的，后面我们会讨论。)
请注意， window.innerWidth/Height的值包括滚动条的尺寸，因为它们也被视为窗口内部的一部分。(这主要是出于历史原因。)
window.innerWidth/Height
含义：包含滚动条尺寸的浏览器显示内容区域的完整尺寸
度量：CSS的pixels
兼容性问题：IE不支持，Opera用设备pixels来度量
滚动移位 Scrolling offset
window.pageXOffset 和 window.pageYOffset，定义了页面(document)的相对于窗口原点的水平、垂直位移。因此你能够定位用户滚动了多少的滚动条距离。
该属性也以CSS的pixels来度量， 如果您想知道文档已经滚动了多少位移尺寸，无论其处于什么缩放状态。
原理上来说，在用户放大浏览器时，向上滚动了页面，window.pageX/YOffset会改变。但当用户放大页面时，浏览器会尝试着保存用户当前可见的页面的元素依然在可见位置。虽然该特性表现得不如预期，但它意味着：在理论上 该情况下 window.pageX/YOffset并没有改变，被用户滚出屏幕的CSS的pixels几乎保存不变。
window.pageX/YOffset
含义：页面的移位
度量：CSS的pixels
兼容性问题：pageXOffset 和 pageYOffset 在 IE 8 及之前版本的IE不支持, 使用”document.body.scrollLeft” and “document.body.scrollTop” 来取代
概念：视窗(viewport)
在我们继续讨论更多的JavaScript的特性properties之前，先介绍另外一个概念:viewport。
viewport的功能在于控制你网站的最高块状(block)容器：元素。
听起来有点玄乎，举个例子~假设你定义了一个可变尺寸的布局(liquid layout)，且你定义一个侧边栏的宽度为width: 10%。当你改变浏览器窗口大小时，该侧边栏会自动扩张和收缩。这是什么原理呢？
技术上讲，原理是侧边栏的宽度为它父元素宽度的10%，我们设它的父元素是
且你未指定宽度。那么问题就变为了
的宽度到底是多少？
通常，一个块级元素会占用其父元素100%的宽度( 有例外，但现在让我们忽略它们 )。所以
的宽度就是其父元素的宽度。
那么元素到底有多宽？因为它的宽度恰好为浏览器的宽度。所以你的侧边栏宽度width: 10%会占用10%的浏览器宽度。所以的web开发人员都直观的知道和使用该特性了。 但是你也许不知道原理。在原理上，的宽度受viewport所限制，元素为viewport宽度的100%。
反过来，viewport是严格的等于浏览器的窗口：定义就是如此。viewport不是一个HTML的概念，所以你不能通过CSS修改它。它就是为浏览器窗口的宽度高度 – 在桌面浏览器上如此，移动设备浏览器上有点复杂。
影响
缩放事件有一些奇怪的影响，你可以在该网站实验。页面滚动到最上面，放大浏览器2-3倍，网站的宽度会超过浏览器窗口。再将页面滚动到最右边，你会发现网站最上面的蓝色栏目不再对齐了。
这个效果反应了viewport是如何被定义的 。
我定义了最上面蓝色栏目的宽度为width: 100%。100%意味着什么？意味着与父元素相同的宽度，该宽度是的宽度，同样是viewport的宽度，也是浏览器窗口的宽度。
结论：缩放比例100%的情况下很正常，现在我们放大浏览器，viewport变得比网站的总宽度更小。对viewport无影响，但页面的内容溢出了元素，但它却有属性overflow: visible，意味着溢出的部分依然会被显示。
但蓝色栏目却不会溢出，因为我定义了它宽度为width: 100%，结果浏览器就为他赋值宽度为viewport的宽度。浏览器不会在乎这个栏目的宽度是不是过窄了。
页面宽度(document width)
我真正想要知道的是页面内容的总大小，包括超出浏览器窗口的部分。到目前为止，据我所知并没有办法找到这个值(当然，除非你计算页面所有部分的宽度包括所有元素的margin，但是这种计算很容易出错)。
我开始相信我们需要一个JavaScript特性对(property pair)来标示我所谓的页面宽度 document width(当然，以CSS的pixels来度量)。
感到很是疑惑，为什么不在CSS中定义此值？我希望能够width: 100%是根据页面宽度 (document width)而不是元素的宽度来控制蓝色栏目的宽度。(不过，这注定是棘手的，如果无法实现，我也不会感到惊讶。)
测量视窗(Measuring the viewport)
你也许想要知道视窗(viewport)的尺寸，他们可以通过document. documentElement. clientWidth/Height来获取。
如果你熟悉DOM，你会知道document.documentElement实际上就是元素：HTML文档的根元素。然而viewport是比更高级别的元素，打个比喻，它是容纳元素的元素。
如果给元素设置一个可能width值。(顺便说一句，我不建议这样做，但是却是可行的。) 在那种情况下document. documentElement. clientWidth/Height依然给出了viewport的尺寸，而不是元素。( 这是一条特殊规则，仅适用于此元素，仅适用于此属性对。在所有其他情况下，将使用元素的实际宽度。 )
所以document. documentElement. clientWidth/Height只会给出viewport的尺寸，而不管元素尺寸如何改变。
document. documentElement. clientWidth/Height
含义：viewport的尺寸
度量：CSS的pixels
兼容性问题：无
两个属性对 (two property pairs)
但是，视窗(viewport)宽度的尺寸不是也可以通过window.innerWidth/Height吗？可以说是的，也可以说不是。
这两个属性对之间有形式上的区别：document.documentElement.clientWidth/Height不包含滚动条，window.innerWidth/Height 则包含滚动条的宽度。
我们有这两个属性对是因为浏览器大战(Browser Wars)的历史遗留问题。 过去Netscape只支持window.innerWidth/Height，IE 只支持document. documentElement. clientWidth/Height。从那时候开始所有其余浏览器都支持这两个特性。但IE一直未支持window.innerWidth/Height。
拥有两个可用的属性对在桌面系统上是个小麻烦，但事实证明，这对移动设备来说是一种福音。
测量html元素(Measuring theelement)
clientWidth/Height在所有情况下都给出视窗(viewport)尺寸。但是我们在哪里可以找到元素本身的尺寸？可以通过document.documentElement.offsetWidth/Height属性来获取。
这些属性使您可以将元素作为块级元素进行访问。如果设置width，offsetWidth将反映出来。
document. documentElement. offsetWidth/Height
含义：的尺寸
度量：CSS的pixels
兼容性问题：IE用这个值标示viewport的尺寸而非
事件坐标(Event coordinates)
当触发鼠标事件时，事件对象内将有不少于五个属性对，以提供有关事件确切位置的信息。对于我们来说，其中三个很重要：
pageX/Y给出相对于 起点到事件触发点的坐标。
clientX/Y给出相对于视窗(viewport)起点到事件触发点的坐标。
screenX/Y给出相对于显示器屏幕起点到事件触发点的坐标。
pageX/Y示意图：
clientX/Y示意图：
screenX/Y示意图：
通常您想知道事件触发点相对于的位置， 所以pageX/Y会被经常使用。至于 clientX/Y的使用场景有限，screenX/Y则基本用不上。
pageX/Y, clientX/Y, screenX/Y
含义：见上文
度量：见上文
兼容性问题：IE不支持pageX/Y,IE使用CSSpixels来度量screanX/Y
媒体查询(Media queries)
最后，说说关于媒体查询的一些问题。出发点很简单：您可以定义特殊的CSS规则，仅在页面宽度大于，等于或小于指定宽度时才执行。例如：
div.sidebar {
width: 300px;
}
@media all and (max-width: 400px) {
// /宽度小于400px时应用的样式;
div.sidebar {
width: 100px;
}
}
如果宽度大于400px，那么sidebar宽度为300px。反之，sidebar宽度为100px。
那么问题来了：我们在这里media宽度是指哪个宽度？
有两个相关的media查询：width/height 和 device-width/device-height。
width/height使用与documentElement .clientWidth/Height(视窗viewport)相同的值，以CSS的pixels来度量 。
device-width/device-height使用与screen.width/height(屏幕screen)相同的值 ，以设备的pixels来度量 。
您应该使用哪个？这很容易当然是：width。Web开发人员对设备的宽度不感兴趣，重要的是浏览器窗口的宽度。
因此在桌面浏览器中使用 width，而device-width则不应在桌面上使用。
总结
以上，我们解释了设备的pixels与CSS的pixels、浏览器缩放、screen.width/height、window.innerWidth/Height、window.pageX/YOffset、视窗(viewport)、 document. documentElement. clientWidth/Height、 document.documentElement.offsetWidth/Height、pageX/Y, clientX/Y, screenX/Y、媒体查询(Media queries)等概念或属性，是针对桌面浏览器环境进行讨论的，但在移动设备上的情况则更加混乱。下一篇文章将针对这些概念移植到移动设备上，并强调与桌面浏览器的一些重要区别。
原文出处： /mobile/viewports.html 译文出处：/css/viewports.html
