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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

讓我們來看一下實際的尺寸吧。我們從screen.width和screen.height開始。他們表示用戶屏幕的總寬度和總高度。他們的單位是設(shè)備像素，因為它們從來不會改變：它們是顯示器的特性，不是瀏覽器的特性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

瀏覽器廠商，你們怎么認(rèn)為那？

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

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

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

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

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

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

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

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

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

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

pageX/Y

clientX/Y

screenX/Y

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

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

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

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

問題是哪個寬度和400px比較？

有兩個相關(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)該用哪個寬度？想都不用想，當(dāng)然是width。web開發(fā)者對設(shè)備寬度不感興趣，只是對瀏覽器窗口的寬度感興趣。

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

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

博客地址