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

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

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

你需要理解的第一個概念是css像素和設備像素之間的區別。

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

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

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

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

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

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

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

如果你放大，相反的事情就發生了。css像素開始變大，現在一個css像素可以覆蓋若干個設備像素

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

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

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

在100%縮放的情況下，css像素和設備像素是嚴格相等的。

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

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

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

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

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

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

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

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

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

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

viewport的作用是限制元素，是網站的最頂級的塊級元素。

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

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

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

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

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

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

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

現在滾動到最右邊，你將會看到頂部的藍色欄不再被正確的排列。

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

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

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

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

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

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

瀏覽器廠商，你們怎么認為那？

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

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

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

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

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

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

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

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

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

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

pageX/Y

clientX/Y

screenX/Y

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

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

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

現在這個sidebar在寬度大于400px的時候寬300px,小于等于400px的時候寬100px;

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

有兩個相關的媒體查詢：width/height 和 device-width/device-height.

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

應該用哪個寬度？想都不用想，當然是width。web開發者對設備寬度不感興趣，只是對瀏覽器窗口的寬度感興趣。

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

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

博客地址