视口1

两个视口的故事-第一部分
此页面已翻译成俄文，中文和韩文。

在这个小型系列文章中，我将解释视口和各种重要元素（例如元素）以及窗口和屏幕的宽度如何工作。

此页面与台式机浏览器有关，其唯一目的是为移动浏览器的类似讨论打下基础。大多数Web开发人员已经可以直观地了解大多数桌面概念。在移动设备上，我们将找到相同的概念，但更为复杂，并且对每个人都知道的术语进行事先讨论将极大地帮助您理解移动浏览器。

概念：设备像素和CSS像素
您需要了解的第一个概念是CSS像素，以及与设备像素的区别。

设备像素是我们直觉上认为是“正确”的像素。这些像素给出您正在使用的任何设备的形式分辨率，并且（通常）可以从中读取screen.width/height。

如果您给某个元素一个width: 128px，并且您的监视器是1024px宽，并且最大化了您的浏览器屏幕，则该元素将在您的监视器上显示八次（大致；现在让我们忽略一些棘手的问题）。

但是，如果用户缩放，则此计算将改变。如果用户缩放到200％，则您的元素width: 128px将只能在其1024px宽的显示器上显示四次。

在现代浏览器中实现的缩放只不过是“扩展”像素而已。也就是说，元素的宽度不会从128更改为256像素；相反，实际像素的大小增加了一倍。形式上，即使元素恰好占用256个设备像素的空间，它的宽度仍为128个CSS像素。

换句话说，缩放到200％可使一个CSS像素增长到一个设备像素大小的四倍。（宽度的两倍，高度的两倍，总共产生四倍）。

一些图像将阐明概念。这是100％缩放级别的四个像素。这里没什么可看的。CSS像素与设备像素完全重叠。

现在让我们缩小。CSS像素开始缩小，这意味着一个设备像素现在与几个CSS像素重叠。

如果放大，则相反。CSS像素开始增长，现在一个CSS像素与几个设备像素重叠。

这里的重点是您只对CSS像素感兴趣。这些像素决定了样式表的呈现方式。

设备像素对您几乎完全无用。不给用户；用户会放大或缩小页面，直到可以舒适地阅读为止。但是，缩放级别对您而言并不重要。浏览器将自动确保您的CSS布局被拉伸或压缩。

100％缩放
我以假定缩放比例为100％开始。现在该更严格地定义它了：

在100％缩放级别下，一个CSS像素等于一个设备像素。

100％缩放的概念在下面的解释中非常有用，但是您在日常工作中不必过分担心。在台式机上，您通常会以100％的缩放比例测试网站，但是即使用户放大或缩小CSS像素的魔力，也可以确保您的布局保持相同的比例。

屏幕尺寸
屏幕宽度/高度
含义
用户屏幕的总大小。
在中测量
设备像素
浏览器错误
在IE7和IE8模式下，IE8均以CSS像素为单位进行测量。
让我们看一些实际的测量。我们将从screen.width和开始 screen.height。它们包含用户屏幕的总宽度和高度。这些尺寸以设备像素为单位进行测量，因为它们从未改变：它们是显示器的功能，而不是浏览器的功能。

好玩！但是我们如何处理这些信息？

基本上什么都没有。用户的监视器大小对我们来说并不重要-除非您想对其进行测量以用于Web统计数据库中，否则它的大小是不重要的。

窗户尺寸
window.innerWidth / Height
含义
浏览器窗口的总大小，包括滚动条。
在中测量
CSS像素
浏览器错误
IE不支持。
Opera用设备像素来度量它。
相反，您想知道的是浏览器窗口的内部尺寸。确切地告诉您用户当前有多少空间可用于CSS布局。您可以在window.innerWidth和中找到这些尺寸window.innerHeight。

显然，窗口的内部宽度以CSS像素为单位。您需要知道可以将多少布局压缩到浏览器窗口中，并且该数量随用户放大而减小。因此，如果用户放大，则窗口中的可用空间会减少，并 window.innerWidth/Height通过减小来反映出来。

（Opera是一个例外，Operawindow.innerWidth/Height 不会在用户放大时减小：它们以设备像素为单位进行测量。这在台式机上很烦人，但在移动设备上却很致命，我们将在后面看到。）

请注意，测量的宽度和高度包括滚动条。它们也被视为内部窗口的一部分。（这主要是出于历史原因。）

滚动偏移
window.pageX / YOffset
含义
页面的滚动偏移量。
在中测量
CSS像素
浏览器错误
没有
window.pageXOffset和window.pageYOffset，包含文档的水平和垂直滚动偏移量。因此，您可以找出用户滚动了多少。

这些属性也以CSS像素为单位。您想知道已经滚动了多少文档，无论其处于什么缩放状态。

从理论上讲，如果用户向上滚动然后放大，window.pageX/YOffset则会发生变化。但是，浏览器尝试通过在用户缩放时在可见页面的顶部保留相同的元素来使网页保持一致。这并不总是完美的，但是这意味着实际上window.pageX/YOffset并没有真正改变：从窗口中滚动出的CSS像素数量保持（大致）相同。

概念：视口
在继续使用更多JavaScript属性之前，我们必须引入另一个概念：视口。

视口的功能是约束元素，该元素是站点的最上方包含的块。

这听起来可能有点含糊，所以这是一个实际的例子。假设您有一个流畅的布局，并且其中一个侧边栏有width: 10%。现在，在调整浏览器窗口的大小时，边栏会整齐地增长和收缩。但是究竟是如何工作的呢？

从技术上讲，发生的事情是侧边栏获得其父级宽度的10％。假设这是（并且您没有给它一个 width）。因此问题变成了宽度。

通常，所有块级元素都占用其父元素宽度的100％（有例外，但现在让我们忽略它们）。因此 ，元素与其父元素一样宽。

元素有多宽？为什么呢，它和浏览器窗口一样宽。因此，您的侧边栏width: 10%将占据整个浏览器窗口的10％。所有的Web开发人员都直观地知道并使用这个事实。

您可能不知道这在理论上是如何工作的。理论上， 元素的宽度受视口宽度的限制。的元件采用的是视口的宽度的100％。

视口又恰好等于浏览器窗口：视口就是这样定义的。视口不是HTML构造，因此不能受CSS影响。它只是在桌面上具有浏览器窗口的宽度和高度。在移动设备上，它要复杂得多。

后果
这种状况有一些奇怪的后果。您可以在此站点上看到其中之一。一直滚动到顶部，然后放大两三个步骤，以使该站点的内容溢出浏览器窗口。

现在，向右滚动，您将看到站点顶部的蓝色栏不再正确对齐。

此行为是视口定义方式的结果。我把顶部的蓝色条给了width: 100%。100％是什么？与视口一样宽的元素，与浏览器窗口一样宽。

重点是：虽然这在100％缩放下可以正常工作，但是现在我们放大的视口已变得小于网站总宽度。本身并不重要，现在内容会从元素中溢出，但是该元素具有 overflow: visible，这意味着无论如何都将显示溢出的内容。

但是蓝色条不会溢出。width: 100%毕竟，我给了它一个，浏览器通过赋予它视口的宽度来服从。他们不在乎那个宽度现在太窄了。

文件宽度？
我真正需要知道的是页面总内容的宽度，包括“伸出”的部分。据我所知，不可能找到该值（嗯，除非您计算页面上所有元素的单独宽度和边距，但要轻描淡写就容易出错）。

我开始相信我们需要一个JavaScript属性对，该属性对给出我称之为“文档宽度”（显然，以CSS像素为单位）。

如果我们真的很时髦，为什么不还将此值暴露给CSS？我希望能够width: 100%根据文档的宽度而不是元素的宽度来确定我的蓝色条。（不过，这注定是棘手的，如果无法实现，我也不会感到惊讶。）

浏览器供应商，您如何看待？

测量视口
文件。documentElement。clientWidth / Height
含义
视口尺寸
在中测量
CSS像素
浏览器错误
没有
您可能想知道视口的尺寸。它们可以在document.documentElement.clientWidth 和中找到-Height。

如果您知道DOM，那么您document.documentElement实际上就是 元素：任何HTML文档的根元素。但是，可以说，视口要高一层。它是包含该 元素的元素。如果给元素一个，那可能很重要width。（顺便说一句，我不建议这样做，但是有可能。）

在那种情况下document.documentElement.clientWidth ，-Height仍然给出视口的尺寸，而不是 元素的尺寸。（这是一条特殊规则，仅适用于此元素，仅适用于此属性对。在所有其他情况下，将使用元素的实际宽度。）

因此document.documentElement.clientWidth，-Height始终提供视口尺寸，无论元素的尺寸如何。

两个属性对
但是，视口宽度的尺寸不是也由给出window.innerWidth/Height吗？好吧，是的，不是。

这两个属性对之间有形式上的区别：document.documentElement.clientWidth 并且-Height不包含滚动条，而包含滚动条window.innerWidth/Height 。不过，那主要是无所作为。

我们有两个属性对的事实是Browser Wars的保留。那时仅支持Netscape，仅支持 window.innerWidth/HeightIEdocument.documentElement.clientWidth 和-Height。从那时起，所有其他浏览器都开始支持clientWidth/Height，但是IE并没有出现window.innerWidth/Height。

我们将看到，拥有两个可用的属性对在台式机上是一个小麻烦-但事实证明，这对移动设备来说是一种祝福。

测量元素
文件。documentElement。offsetWidth / Height
含义

元素的尺寸（以及页面的尺寸）。 在中测量 CSS像素 浏览器错误 IE会测量视口，而不是 元素。 因此clientWidth/Height，在所有情况下都应提供视口尺寸。但是我们在哪里可以找到元素本身的尺寸？它们存储在 document.documentElement.offsetWidth和中-Height。

这些属性确实使您可以将元素作为块级元素进行访问。如果设置width，offsetWidth将反映出来。

事件坐标
pageX / Y，clientX / Y，screenX / Y
含义
见正文
在中测量
见正文
浏览器错误
IE不支持pageX / Y。
IE和Opera用CSS像素计算screenX / Y。
然后是事件坐标。发生鼠标事件时，将公开不少于五个属性对，以提供有关事件确切位置的信息。对于我们的讨论，其中三个很重要：

pageX/Y给出相对于 CSS像素中元素的坐标。
clientX/Y 以CSS像素给出相对于视口的坐标。
screenX/Y 以设备像素为单位给出相对于屏幕的坐标。
pageX / Y客户 端X / Y屏幕X / Y

您将使用pageX/Y90％的时间；通常，您想知道事件相对于文档的位置。您将使用的其余10％的时间 clientX/Y。您永远都不需要知道相对于屏幕的事件坐标。

媒体查询
媒体查询
含义
见正文
在中测量
见正文
浏览器错误
IE不支持它们。
对于device-width/heightFirefox，使用screen.width/height 以CSS像素为单位的值。
对于width/heightSafari和Chrome，请使用documentElement .clientWidth/Height 以设备像素为单位来衡量的值。
最后，关于媒体查询的一些话。这个想法很简单：您可以定义特殊的CSS规则，仅在页面宽度大于，等于或小于特定大小时才执行。例如：

div.sidebar {
宽度：300像素；
}

@media all和（最大宽度：400像素）{
//当宽度小于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 （换句话说，屏幕）相同的值。它适用于设备像素。

您应该使用哪个？这很容易：width当然。Web开发人员对设备的宽度不感兴趣。重要的是浏览器窗口的宽度。

因此width，device-width在桌面上使用并忘记吧。正如我们将看到的那样，在移动设备上情况更加混乱。