摘要：它就是有瀏覽器窗口的寬度和高度桌面在移動(dòng)瀏覽器上它是比較復(fù)雜的。第二篇文章將介紹這些概念在移動(dòng)瀏覽器的應(yīng)用，并重點(diǎn)說明和桌面瀏覽器的不同。

在這個(gè)系列文章中，我將說明viewports和重要元素的寬度是如何工作的，比如元素、window和 scrren的寬度。

這篇文章是關(guān)于桌面瀏覽器的，目的是為介紹移動(dòng)瀏覽器做好準(zhǔn)備。大部分的web開發(fā)者已經(jīng)對(duì)桌面瀏覽器的一些概念很熟悉了。在移動(dòng)瀏覽器上我們會(huì)發(fā)現(xiàn)同樣的概念，只不過要更復(fù)雜一些，回顧一下這些熟悉的概念將對(duì)我們理解移動(dòng)瀏覽器有很大的幫助。

你需要理解的第一個(gè)概念是css像素和設(shè)備像素之間的區(qū)別。

設(shè)備像素，顧名思義，無論你用什么設(shè)備，設(shè)備像素都是表示設(shè)備的實(shí)際分辨率。設(shè)備像素可以從screen.width/height讀取。

如果你給一個(gè)元素widht:128px,你的顯示器是1024px寬，你最大化你的瀏覽器，這個(gè)元素可以在屏幕上平鋪8個(gè)。(大概；忽略一些不確定因素)

如果用戶縮放了頁面，這個(gè)值將發(fā)生改變。如果用戶放大瀏覽器到200%，你的128px的元素只能在屏幕上平鋪4個(gè)了。

用戶縮放在瀏覽器中是通過拉伸像素實(shí)現(xiàn)的。也就是說，元素的寬度并沒有從128px變成256px，而是像素的尺寸變成了原來的兩倍。綜上，這個(gè)元素仍舊有128px的css像素,但是此時(shí)它卻占有256px的設(shè)備像素。

換句話說，放到到200%使一個(gè)css像素尺寸了變成了4倍的設(shè)備像素的尺寸。(兩倍的寬，兩倍的高)。

下面幾個(gè)圖片可以很清楚的說明這個(gè)概念。第一個(gè)是縮放為100%，這個(gè)沒什么可看的。css像素完全覆蓋了設(shè)備像素。

現(xiàn)在我們縮小頁面。css像素開始縮小，意味著一個(gè)設(shè)備像素可以覆蓋若干個(gè)css像素。

如果你放大，相反的事情就發(fā)生了。css像素開始變大，現(xiàn)在一個(gè)css像素可以覆蓋若干個(gè)設(shè)備像素

關(guān)鍵點(diǎn)在于你只需要關(guān)系css像素，它決定你的樣式如何渲染。

設(shè)備像素對(duì)于你來說幾乎是無用的。對(duì)用戶來說不是，用戶會(huì)縮放頁面直到頁面看起來舒服位置。但是這個(gè)縮放比對(duì)你來說不重要，瀏覽器會(huì)自動(dòng)根據(jù)縮放比來縮小或者放大的你的css像素。

我上面提到的例子，前提是100%的縮放。現(xiàn)在可以更嚴(yán)格的定義一下：

在100%縮放的情況下，css像素和設(shè)備像素是嚴(yán)格相等的。

這100%縮放的概念在我們的這個(gè)解釋中是非常有用的，但是我們?cè)谌粘ｉ_發(fā)中不需要過度擔(dān)心這個(gè)。在桌面瀏覽器開發(fā)中通常你都是在100%縮放的情況下，即使用戶縮放頁面，css像素的原理也能保證你的布局保持比例，不能打亂。

讓我們來看一下實(shí)際的尺寸吧。我們從screen.width和screen.height開始。他們表示用戶屏幕的總寬度和總高度。他們的單位是設(shè)備像素，因?yàn)樗鼈儚膩聿粫?huì)改變：它們是顯示器的特性，不是瀏覽器的特性。

很有意思！但是我們能用這個(gè)信息做什么那？

基本沒有用。用戶的顯示器尺寸對(duì)我們來說不重要，除非你想做一個(gè)web資料數(shù)據(jù)庫(kù)。

相反，你關(guān)心的是瀏覽器窗口的內(nèi)部尺寸是什么。那會(huì)告訴你用于展示你的css布局的空間是多大。你可以通過window.innerWidth和window.innerHeight來獲取。

很明顯，窗口的內(nèi)部寬度的單位是css像素。你需要知道的是你的css布局有多少可以呈現(xiàn)在瀏覽器窗口中，而且這個(gè)呈現(xiàn)的數(shù)量會(huì)隨著用戶放大頁面而減少(css像素越大，所呈現(xiàn)的內(nèi)容越少)。因此如果用戶放大頁面，你可用的空間也就越少，在window.innerWidth/Height反應(yīng)為值減小。

注意！這個(gè)寬度和高度包括滾動(dòng)條。滾動(dòng)條也被認(rèn)為是瀏覽器窗口的一部分。(這個(gè)有歷史的原因)

window.pageXOffset和window.pageYOffset,表示document橫向和縱向的滾動(dòng)偏移。通過這兩個(gè)屬性，你可以知道用戶滾動(dòng)的位置。

這兩個(gè)屬性的單位也是css像素。理論上，如果用戶向上滾動(dòng)然后放大，window.pageX/YOffset應(yīng)該發(fā)生改變。但是瀏覽器做了一些處理，在用戶縮放的時(shí)候，瀏覽器試圖使同一個(gè)元素保持在瀏覽器窗口的頂部來使頁面看起來不會(huì)跳動(dòng)。這意味著window.pageX/YOffset在用戶縮放的時(shí)候不會(huì)改變：被滾動(dòng)出屏幕的css像素?cái)?shù)不會(huì)改變。

在我們繼續(xù)介紹更多的js屬性之前，我們必須介紹另外一個(gè)概念：viewport。

viewport的作用是限制元素，是網(wǎng)站的最頂級(jí)的塊級(jí)元素。

這聽起來或許有一點(diǎn)模糊，我們來舉一個(gè)實(shí)際的例子。假設(shè)你有一個(gè)流體布局，你的側(cè)邊欄是width:10%.當(dāng)你調(diào)整瀏覽器的大小時(shí)，側(cè)邊欄隨著增大或減小。那它到底是怎么工作的那？

從技術(shù)上說，側(cè)邊欄在獲取它父元素的寬度的10%的時(shí)候發(fā)生了什么。我們假定元素為父元素。所以現(xiàn)在問題變成了元素（你沒有給賦寬度）的寬度是多少。

通常來說，所有的塊級(jí)元素的寬度都是父元素的寬度的100%。因此元素是和它的父元素一樣寬的。

現(xiàn)在元素的寬度是多少那？為什么它和瀏覽器一樣寬。這也是為什么你的width:10%的側(cè)邊欄占整個(gè)瀏覽器寬度的10%的原因。所有的web開發(fā)者都知道這個(gè)事實(shí)。

你或許不知道這其中的工作原理。理論上，html元素的寬度是被viewport的寬度限制的。html元素等于viewport的寬度。

viewport和瀏覽器窗口相等的：它就是這么被定義的。viewport不是一個(gè)HTML結(jié)構(gòu)，所以你不能靠css影響它。它就是有瀏覽器窗口的寬度和高度(桌面);在移動(dòng)瀏覽器上它是比較復(fù)雜的。

這些東西有時(shí)候會(huì)有一些奇怪的結(jié)果。你能這個(gè)網(wǎng)站(http://www.quirksmode.org/mob...。滾動(dòng)到最頂部，然后放大頁面2到3倍，使頁面內(nèi)容溢出瀏覽器窗口。

現(xiàn)在滾動(dòng)到最右邊，你將會(huì)看到頂部的藍(lán)色欄不再被正確的排列。

這個(gè)行為是viewport被定義的方式導(dǎo)致的。我給了藍(lán)色頂部欄一個(gè)width:100%.什么的100%？html元素的100%。元素和viewport是等寬的，所以和瀏覽器窗口也是等寬的。

重點(diǎn)是：在100%縮放時(shí)，它是正常的，現(xiàn)在我們放大頁面，導(dǎo)致viewport變的比我們頁面的總寬度小。對(duì)于它自己來說這不重要，頁面的內(nèi)容溢出了html元素，但是html元素是[overflow](http://www.quirksmode.org/css/overflow.html): visible，這就意味著超出的元素會(huì)被顯示。

但是藍(lán)色頂部欄沒有溢出。我給了它width:100%,瀏覽器會(huì)給它一個(gè)viewport的寬度。他們不關(guān)心現(xiàn)在的寬度太小了。

我真正想知道的是頁面內(nèi)容的總寬度是多少，包括突出的部分。據(jù)我所知，瀏覽器并未提供這個(gè)值。

我開始相信我們需要一個(gè)js屬性對(duì)來表示我稱作"document width"的值。

如果我們真是覺得這樣不爽，為什么不把document width的值暴露給css那？我希望藍(lán)色頂部欄繼承document寬度，而不是html元素的寬度。（這個(gè)確實(shí)有些棘手，如果不可能實(shí)現(xiàn)我也不會(huì)覺得驚訝）

瀏覽器廠商，你們?cè)趺凑J(rèn)為那？

你或許想要知道viewport的尺寸。他們可以通過document.documentElement.clientWidth/clientHeight來獲取.

如果你了解dom結(jié)構(gòu)，你就知道document.documentElement其實(shí)是元素：文檔的根元素。然而，viewport是更高一級(jí)的，可以說它是包含元素的元素。如果你給了元素一個(gè)寬度，那就變得比較重要了(不推薦這樣做，但是這是可以的)。即使在這種情況下，document.documentElement.clientWidth/clientHeight仍舊給出的是viewport的尺寸，而不是html的尺寸。(這是一個(gè)只對(duì)這個(gè)元素和這個(gè)屬性對(duì)起作用的特例。其他情況下clientWidth/clientHeight都是取元素的真實(shí)尺寸)。

因此document.documentElement.clientWidth/clientHeight總是給出viewport的尺寸，無視html的尺寸。

那么viewport的尺寸是不是也可以由window.innerWidth/Height給出。答案是也不是。

這兩對(duì)屬性值的唯一區(qū)別在于，window.innerWidth/Height包括滾動(dòng)條的寬度，document.documentElement.clientWidth/clientHeight不包括。

我們之所以有兩對(duì)屬性是瀏覽器大戰(zhàn)的產(chǎn)物。當(dāng)時(shí)Netscape只支持window.innerWidth/Height，而IE只支持document.documentElement.clientWidth/clientHeight。當(dāng)所有其他瀏覽器開始支持document.documentElement.clientWidth/clientHeight的時(shí)候，IE仍舊不支持window.innerWidth/Height.在桌面瀏覽器上有兩個(gè)屬性對(duì)是一個(gè)煩人的事情，但是在移動(dòng)瀏覽器上它是一個(gè)福音。

document.documentElement.clientWidth/clientHeight在所有的情況下都給出的是viewport的尺寸。那么我們從哪里獲取html元素自身的寬和高那？他們被存在document.documentElement.offsetWidth/offsetHeight里。

這兩個(gè)屬性真地給了你一個(gè)訪問元素作為塊級(jí)元素的接口。如果你設(shè)置width或者offsetWidth將會(huì)影響這兩個(gè)屬性。

有一些事件坐標(biāo)值。當(dāng)一個(gè)鼠標(biāo)事件發(fā)生時(shí)，不少于5對(duì)屬性值會(huì)被暴露出來給你事件發(fā)生的具體位置信息。其中3對(duì)是對(duì)我們的討論來說重要的：

1. pageX/Y給出相對(duì)于html元素的坐標(biāo)，單位是css像素
2. clientX/Y給出相對(duì)于viewport的坐標(biāo)，單位是css像素
3. screenX/Y給出相對(duì)于屏幕的坐標(biāo)，單位是設(shè)備像素

pageX/Y

clientX/Y

screenX/Y

你90%的情況下都會(huì)使用pageX/Y;通常你想要知道相對(duì)于document的位置。其他的10%你想要用clientX/Y.你基本不需要知道相對(duì)于屏幕的尺寸。

最后，說一些媒體查詢。這個(gè)思想很簡(jiǎn)單：你可以指定在頁面在不同條件下運(yùn)行不同的css，比如頁面寬度大于、等于、小于某個(gè)尺寸的時(shí)候。

div.sidebar{
    width:30%;
}
@media all and (max-width:400px) {
    //styles assigned when width is smaller than 400px;
    div.sidebar {
        width: 100px;
    }
}

現(xiàn)在這個(gè)sidebar在寬度大于400px的時(shí)候?qū)?00px,小于等于400px的時(shí)候?qū)?00px;

問題是哪個(gè)寬度和400px比較？

有兩個(gè)相關(guān)的媒體查詢：width/height 和 device-width/device-height.

1. `width/height`用的是`documentElement.clientWidth/height`（就是viewport）。單位是css像素。
2. `device-width/device-height`用的是`screen.width/height`.單位是設(shè)備像素。

應(yīng)該用哪個(gè)寬度？想都不用想，當(dāng)然是width。web開發(fā)者對(duì)設(shè)備寬度不感興趣，只是對(duì)瀏覽器窗口的寬度感興趣。

在桌面瀏覽器上使用width，忘記device-width.正如我們所看到的，這在移動(dòng)設(shè)備上是更復(fù)雜的。

這篇文章總結(jié)了我們對(duì)桌面瀏覽器的探索。第二篇文章將介紹這些概念在移動(dòng)瀏覽器的應(yīng)用，并重點(diǎn)說明和桌面瀏覽器的不同。

博客地址