原文地址：http://quirksmode.org/mobile/...在这篇简短的文章中，我将介绍关于视口和视图如html的呈现原理元素、窗口对象和屏幕对象等重要对象。本文讨论桌面浏览器，其目的是为后续类似移动端行为的讨论提供一定的基础。许多Web开发人员已经直观地理解了许多桌面概念。然而，这些概念在移动设备上变得更加复杂，因此预先讨论这些熟悉的术语将有助于您了解移动浏览器的行为。相关概念：设备像素和CSS像素您首先需要了解什么是CSS像素以及它与设备像素之间的区别。设备像素是我们直觉上认为是“正确”的像素。它给出了关于您正在使用的设备的正式结论，并且可以通过“screen.width/height”访问。假设有一个元素的宽度为128px，屏幕宽度为1024px。当您获得最佳匹配时，该元素将占据屏幕的1/8。如果你缩放屏幕，你会得到不同的结果。假设您将屏幕缩放到200%，您的128px元素将占据1024px屏幕的1/4。在现代浏览器中缩放只不过是像素大小的变化。这并不是说元素的宽度从128像素增加到256像素，而是像素数翻了一番。形式上，即使该元素占用256个设备像素，它仍然只有128个CSS像素。换句话说，缩放到200%的CSS像素是设备像素大小的四倍。（宽度的两倍，高度的两倍，整体的四倍）。下面的图片会更直观的描述这个概念。在四像素100%缩放示例中：CSS像素完全重叠设备像素。现在进行缩小操作，CSS像素大小开始缩小，这意味着一个设备像素可以覆盖多个CSS像素。如果放大，CSS像素大小开始扩大，现在一个CSS像素可以覆盖多个设备像素。这里的关键点是CSS像素。它决定了样式表的呈现。设备像素对你来说几乎完全没用。当页面不便阅读时，用户将通过缩放操作获得舒适的阅读体验。但是，当缩放级别不能满足您的要求时，浏览器会自动调整缩放CSS布局。100%缩放我们首先假设一个100%缩放示例。是时候给出一个稍微严格的定义了：在100%缩放级别，一个CSS像素实际上相当于一个设备像素。100%zoom这个概念对于后面的讲解非常重要。但是你不必为日常工作过于担心，因为在桌面上你的网站通常以100%缩放打开，即使用户使用缩放，CSS的像素魔法也会确保样式以相同的比例呈现。屏幕尺寸让我们关注一些实际尺寸，从screen.width和screen.height开始。即用户屏幕的高度和宽度。我们用设备像素来描述这个大小，因为它永远不会改变：请注意，这是显示器的特性，而不是浏览器的特性，所以不要混淆。这看起来很有趣！但是我们可以用这些信息做什么呢？事实上，这对我们的屏幕尺寸并不重要。除非您想记录它们并在网络统计数据库中使用它们，否则它几乎没有用处。窗口大小相反，您需要知道的是浏览器窗口的固有大小。它反映了用户可以使用多少空间来进行CSS布局。可以通过window.innerWidth和window.innerHeight获取。可以清楚地看到窗口的内部宽度是以CSS像素为单位测量的。你必须知道你的布局在浏览器窗口中显示了多少，以及当用户放大时它们的大小如何减小。所以如果用户放大，你在窗口上的可用空间会变小，window.innerWidth/Height也会变小变小。（注：这里虽然进行了放大操作，但是由于只是每个css像素变大（设备宽度没有变化），css的大小没有变化，反而缩小了window中可以显示的大小)（对于Opera有一个例外，当用户放大时，浏览器的window.innerWidth/Height不会缩小。这是因为Opera是使用设备宽度而不是CSS宽度来测量的。这在桌面上无关紧要，但是onmobile真的很致命，我们稍后再讨论。）滚动偏移（offset）window.pageXOffset和window.pageYOffset用于测量文档中的垂直和水平偏移。因此，通过它们可以得到用户页面此刻的滚动情况。它们也以CSS像素为单位进行测量。您可以使用它来获取有关正在向上滚动的文档的信息，无论它是否放大。理论上，如果用户向上滚动页面并放大，window.pageX/YOffset会发生变化。但是浏览器会默认保持页面一致，即保证在用户放大时页面顶部的可见区域出现相同的元素。尽管这并不总是有效，但这意味着实际上window.pageX/YOffset并不需要更改。视口的概念在我们继续讨论更多的JS属性之前，让我们学习另一个概念视口（viewport）。视口的作用是限制元素，它是所有网页块元素中最高级别的元素。这听起来可能令人头晕，所以这里有一个实际的例子。假设在流畅的布局中，您的一个侧边栏的宽度为10%。当您更改浏览器宽度时，侧边栏现在会一致地缩放。那么问题来了，他是如何工作的？原则上，当你给侧边栏设置10%的宽度时，它实际上得到父级宽度的10%。让我们检查一下body元素（您没有设置宽度的地方）。那么问题来了，body元素的宽度是多少？通常情况下，所有的块级元素都会与父元素具有相同的宽度（也有一些例外，但不要担心细节）。所以
元素与其父元素的宽度相同。元素的宽度又如何呢？为什么它和浏览器窗口一样宽？因为它和浏览器窗口一样宽，这就是为什么你将侧边栏宽度设置为10%，它占据了整个浏览器宽度的10%。这是所有Web开发人员都在情感上认可和使用的原则。你不知道的只是理论上，这个原理是如何实现的。理论上，元素的宽度受视口限制。元素占据视口宽度的100%。视口宽度恰好等于浏览器宽度：这就是它的定义方式。viewport不是HTML结构，它不受CSS控制。在桌面上，它与浏览器窗口的大小相同。但是在移动设备上情况要复杂一些。结论在这种情况下有许多有趣的现象，您可以通过此页面观察其中之一。滚动到顶部并放大一次或两次，使内容区域溢出窗口。现在，当您向右滚动时，顶部的蓝色方块并未完全填满。这是因为我们这样定义了视口，所以才会发生这种情况。我们将蓝色块的宽度定义为100%。那100%究竟是什么？它是元素的100%，与视口一样宽，与浏览器窗口一样宽。重点是：上诉的结论是在100%缩放的条件下成立的。现在放大时，视口宽度将小于网站宽度。这对元素本身影响不大，但是元素的内容会溢出元素，而元素有一个overflow:visible属性，表示无论如何都会显示溢出的内容。但是，蓝色块不会溢出。其宽度已设置为100%。毕竟，浏览器必须遵守视口的宽度设置，而不是关心当前宽度是否太窄。文档宽度？我们真正需要知道的是页面内容区域的真实宽度（包括扩展）。但据我所知是不可能得到这个值的（当然如果你可以单独计算页面中所有元素的疯狂高度，但请记住这是极度容易出错的）。我开始相信我们需要一组JS属性对来获取我们所说的“文档宽度”的值。（当然是以CSS像素为单位）如果我们真的觉得自己很时尚，为什么不把这种价值带入CSS？我希望蓝色块基于100%的文档宽度，而不是元素。（这确实是个难题，就算不行也不奇怪）浏览器厂商们，你们怎么看？要测量视口，您可能需要获取视口的值，可以通过document.documentElement.clientWidth和-Height获取。如果您熟悉DOM，就会知道document.documentElement实际上是元素（HTML文档的根元素）。但是，可以说视口比它高一级（元素），并且它包含元素。如果您在元素上设置宽度，这将起作用。（虽然这有效，但我不推荐它）在这种情况下，document.documentElement.clientWidth和-Height仍然给出视口大小而不是元素大小。（这是一个奇特的规则，这个属性对只适用于documentElement元素，在其他情况下使用实际宽度。）然后document.documentElement.clientWidth和-Height总是给出视口大小，而不管元素有多宽.两对属性另外，还可以通过window.innerWidth/Height?获取视口的大小？这种说法也是对错。两者的区别在于document.documentElement.clientWidth和-Height不计滚动条，而window.innerWidth/Height计滚动条。这些是一些微不足道的概念。其实这两者都是浏览器霸权时代的产物。当时Netscape只支持window.innerWidth/Height，IE系列只支持document.documentElement.clientWidth和Height。此后，所有其他浏览器都支持了document.documentElement.clientWidth和Height，但IE仍然不支持window.innerWidth/Height。拥有两个属性对在桌面上有点负担，但正如我们将看到的，这在移动设备上是一个巨大的福音。测量元素我们已经知道视口大小在任何情况下都可以通过clientWidth/Height获得。那么如何获取元素的大小呢？传递document.documentElement.offsetWidth和Height。该属性为您提供了一种获取块级元素的宽度和高度的方法。如果设置宽度，将重新计算offsetWidth。事件坐标现在我们来谈谈事件坐标。当鼠标事件发生时，有不少于五个属性可以为您提供有关事件确切位置的信息。在我们的讨论中，以下三个是比较重要的：pageX/Y提供相对于元素的位置信息clientX/Y提供以CSS像素为单位测量的相对于视口的位置信息screenX/Y提供以CSS像素为单位测量的位置信息相对于屏幕的CSS像素90%的情况下你正在使用pageX/Y，你通常Occurswhere你想知道事件发生的位置相对于文档。在其他10%的情况下，您将使用clientX/Y。您很少需要处理浏览器位置事件。媒体查询最后，让我们谈谈媒体查询。这是一个非常简单的概念：您定义一个特殊的CSS规则，该规则仅在页面大于、等于或小于某个值时才生效。例如：div.sidebar{width:300px;}@mediaalland(max-width:400px){//当宽度小于400px时分配的样式；div.sidebar{宽度：100px；}}目前侧边栏的宽度是300px，但是当宽度低于400px时，侧边栏的宽度会变成100px。那么问题来了：我家门的宽度是多少？有两个相关的媒体查询：width/height和device-width/device-height。width/height使用与documentElement.clientWidth/Height相同的值（即视口的宽度）。使用CSS像素宽度。device-width/device-height使用与screen.width/height相同的值（即设备的宽度）。使用设备像素宽度。那么我应该使用哪一个？那就不用问了，当然是宽度了。Web开发人员从不关心设备宽度，他们喜欢浏览器宽度。因此，忘掉设备宽度/设备高度，拥抱桌面上的宽度/高度。我们会看到事情在移动设备上变得更加复杂。结束语本文是对桌面浏览器行为的初步探索。注：翻了一下，发现已经有翻译版了，质量也不错。请发布链接。