摘要：它能給予一個關于你使用何種設備的正式結論，并且能通過獲得。寬度兩倍，高度兩倍，總體四倍。視口的作用是限制元素，元素是所有網頁塊元素中最高一級的元素。視口并非一個結構，其不受控制。重點是上訴結論是在縮放的條件下成立的。

原文地址：http://quirksmode.org/mobile/...

這篇小短文中，我將會介紹關于viewport與諸如html元素，window 對象，screen 對象這類重要對象在呈現方面的原理。

本篇討論桌面瀏覽器，其目的是為了后續討論類似的移動端行為提供一定基礎。大量web開發者早已憑直覺理解了許多桌面端的概念。但是，在移動端這些概念將變得復雜起來，所以預先對這些我們熟知的術語進行討論將有助于你對移動端瀏覽器行為的理解。

你首先需要理解什么是CSS像素，它與設備像素又有何區別。

設備像素是我們直覺上認為是“正確”的像素。它能給予一個關于你使用何種設備的正式結論，并且能通過"screen.width/height"獲得。

假設有一個寬為128px的元素，屏幕寬度為1024px。當你最調整合適時，元素會占屏幕的1/8.

如果你縮放屏幕，你將得到不同的結果。假設你將屏幕放大到200%，你的128像素的元素將會占1024像素的屏幕的1/4。

縮放在現代瀏覽器中的應用無非用像素尺寸的變化來實現。這并不是說元素的寬度由128增大到256像素，而是像素點變為原來的兩倍。形式上，即便元素占了256的設備像素，它依舊只有128的CSS像素。

換言之，一個放大到200%的CSS像素點是設備像素點尺寸的四倍。(寬度兩倍，高度兩倍，總體四倍)。

以下圖片將更直觀的描述這一概念。在一個四像素100%縮放的例子中：CSS像素與設備像素完全重疊。

現在進行縮小操作，CSS像素尺寸開始縮小，這意味著一個設備像素可以覆蓋多個CSS像素。

如果你進行放大操作，CSS像素尺寸開始擴大，現在一個CSS像素可以覆蓋多個設備像素。

這里的關鍵點在于CSS像素。它決定了你的樣式表的呈現。

設備像素對于你來說幾乎是完全無用的。當頁面不方便閱讀時，用戶將通過縮放操作來達到舒適的閱讀體驗。但是，當縮放的水平無法達到你的要求時，瀏覽器會自動調整CSS布局的放大或縮小。

我們通過假定一個100%縮放的例子展開話題。是時候給一個略微嚴格的定義了：

在縮放水平為100%時，一個CSS像素實際上等價與一個設備像素。

這個關于100%縮放的概念對于后續的闡釋是非常重要的。但你不必太過糾結日常的工作，因為在桌面端你的站點通常都是以100%縮放被打開的，即便用戶使用了縮放，CSS的像素魔法也會確保樣式以相同的比例呈現。

讓我們來關注一些實際的尺寸，首先先從screen.width與screen.height說起。即用戶屏幕的高度與寬度。我們用設備像素來描述這一尺寸，因為其永遠不會變化：注意這是顯示器的特性而非瀏覽器，不要混淆。

這看起來相當有趣！但我們能有這些信息做什么？

事實上，對于我們屏幕尺寸并沒什么卵用。除非你你想要記錄它們并在web統計數據庫中使用，那么它會有那么點用。

相反，你需要知道的是瀏覽器window的內在尺寸。它能反映出用戶能使用多少空間來進行CSS布局。你能通過window.innerWidth與window.innerHeight獲取。

可以明顯看出，window的內部寬度使用CSS像素衡量。你必須要知道你的布局有多少顯示在瀏覽器窗口中，并且當用戶放大時它們的尺寸時如何減少的。因此，如果用戶進行放大操作時，你在window上的可用空間將會變小并且window.innerWidth/Height也將變小。

（注：這里雖然進行了放大操作，但由于只是每個css像素點變大（設備寬度無變化）且css的尺寸并沒有改變，所以能呈現在窗口中的尺寸反而時減小的）

(對于Opera存在例外情況，即當用戶進行放大操作時，其瀏覽器的window.innerWidth/Height并沒有縮小。這是由于在Opera 使用設備寬度而非CSS寬度衡量。這在桌面端無關痛癢，但在移動端確實致命的，我們將在稍后進行討論。)

window.pageXOffset與window.pageYOffset用來衡量文檔中垂直與水平方向上的偏移量。因此，通過這它們你可以獲取用戶頁面的此刻的滾動情況。

它們也是通過CSS像素衡量的。無論是否處于放大狀態，你都可以通過其來獲取文檔被向上滾動的情況信息。

理論上講，如果用戶向上滾動頁面并且進行放大操作，window.pageX/YOffset將會變化。但瀏覽器默認會保持頁面前后一致，即在用戶放大時保證同一元素出現在頁面頂部可見區域。雖然，這并不總是奏效，但這意味著實踐中window.pageX/YOffset并不真的需要變化。

在我們繼續討論更多JS屬性前，讓我們先學習另一個概念視口（viewport）。

視口（viewport）的作用是限制元素，元素是所有網頁塊元素中最高一級的元素。

這可能聽著有點暈，所以舉一個實際的例子。假設在一個流式布局中，你其中一個邊欄的寬度是10%。現在當你改變瀏覽器寬度時，邊欄會一致的縮放。那么問題來了，他究竟是如何工作？

原理上說，當你給sidebar一個10%的寬度，實際上它獲得了父級寬度的10%。讓我們來考察一下（你并沒有設定寬度的）body元素。那么問題來了，body元素的寬度是多少？

通常，所有塊級元素的寬度都會等于父元素（這里有些特例，但不要在意細節）。所以元素與其父級元素等寬 element。

那么元素的寬度又如何？為何他與瀏覽器窗口等寬？由于與瀏覽器窗口等寬，這也就是為什么你設置邊欄寬度為10%他就占據了整個瀏覽器寬度的10%。這是一條所有的web開發人員感性上認可并使用的原理。

你不知道的只是在理論上，這條原理如何實現。理論上，元素的寬度被視口限制。而元素占據了100%的視口寬度的。

視口寬度又正好等于瀏覽器寬度:就是這么定義的。視口并非一個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 提供以CSS像素度量的相對于元素的位置信息

clientX/Y 提供以CSS像素度量的相對于視口的位置信息

screenX/Y 提供以CSS像素度量的相對于屏幕的位置信息

90%的情形你在使用pageX/Y，你通常發生在你想要知道發生事件的地點相對文檔的位置。而另外10%的情形，你會用到clientX/Y。你基本不會需要處理事件想對于瀏覽器位置的情形。

最后來談談媒體查詢吧。這是一個非常簡單的概念：由你定義一個特殊的CSS規則，僅在頁面大于，等于，或小于某一特定的值時生效。例如：

div.sidebar {
    width: 300px;
}

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

}

目前，sidebar的寬度時300px，但當寬度低于400px，sidebar的寬度將變為100px。

那么問題來了：我門以哪個寬度作為基準？

存在兩個相關的媒體查詢：width/height與device-width/device-height。

width/height使用與documentElement.clientWidth/Height相同的值 (即視口的寬度)。使用CSS像素寬度。
device-width/device-height使用與screen.width/height相同的值 (即設備的寬度)。使用設備像素寬度。

那我門應該使用哪一個？那還用問，當然是width。web開發者從來對設備寬度不來電，他們衷情于瀏覽器寬度。

因此，在桌面端忘記device-width/device-height擁抱width/height吧。我門將會看到在移動端情況變的復雜起來。

本文是對桌面端瀏覽器行為的初步探索。

注：翻完發現已經有翻譯版了，質量也不錯，鏈接給上。