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

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

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

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

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

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

假設(shè)有一個寬為128px的元素，屏幕寬度為1024px。當(dāng)你最調(diào)整合適時，元素會占屏幕的1/8.

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

縮放在現(xiàn)代瀏覽器中的應(yīng)用無非用像素尺寸的變化來實現(xiàn)。這并不是說元素的寬度由128增大到256像素，而是像素點變?yōu)樵瓉淼膬杀?。形式上，即便元素占?56的設(shè)備像素，它依舊只有128的CSS像素。

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

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

現(xiàn)在進(jìn)行縮小操作，CSS像素尺寸開始縮小，這意味著一個設(shè)備像素可以覆蓋多個CSS像素。

如果你進(jìn)行放大操作，CSS像素尺寸開始擴(kuò)大，現(xiàn)在一個CSS像素可以覆蓋多個設(shè)備像素。

這里的關(guān)鍵點在于CSS像素。它決定了你的樣式表的呈現(xiàn)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這可能聽著有點暈，所以舉一個實際的例子。假設(shè)在一個流式布局中，你其中一個邊欄的寬度是10%?，F(xiàn)在當(dāng)你改變?yōu)g覽器寬度時，邊欄會一致的縮放。那么問題來了，他究竟是如何工作？

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

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

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

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

視口寬度又正好等于瀏覽器寬度:就是這么定義的。視口并非一個HTML結(jié)構(gòu)，其不受CSS控制。在桌面端，其與瀏覽器窗口長寬一致。但在移動端情況略微復(fù)雜。

在這種情況下會有許多有趣的現(xiàn)象，用這個頁面你可以觀察到其中的一個現(xiàn)象。滾動到頂部，放大一到兩次，這樣內(nèi)容區(qū)域就溢出窗口了。

現(xiàn)在當(dāng)你向右滾動時，會發(fā)現(xiàn)頂部藍(lán)色區(qū)塊并不是充分填充的。

正是因為我們將視口定義成如此，才造成了這種現(xiàn)象。我們定義了藍(lán)色區(qū)塊的寬度為100%。那究竟是什么的100%？是元素的100%，元素是和視口等寬的，也是和瀏覽器窗口等寬的。

重點是：上訴結(jié)論是在100%縮放的條件下成立的?，F(xiàn)在在放大的情況下，視口寬度將會小于網(wǎng)站的寬度。這對于元素自身影響不大，但對于元素的內(nèi)容則會溢出元素，并且元素具有overflow: visible屬性，這意味著溢出的內(nèi)容在任何情況下都會被顯示。

不過藍(lán)色區(qū)塊并沒有溢出。已經(jīng)將其寬度設(shè)為100%，畢竟，瀏覽器要遵守視口的寬度設(shè)定，而非關(guān)心當(dāng)下寬度是否過于狹小。

我們真正需要只曉得是頁面內(nèi)容區(qū)域的真實寬度（包括延伸的部分）。但據(jù)我所知不可能得出這個值（當(dāng)然如果你能計算出頁面中所有元素獨自的狂高，但請你牢記，這極容易出錯）。

我開始相信我門需要一組JS屬性對來獲取被我們稱之為“文檔寬度”的值。（當(dāng)然是以CSS像素為單位）

如果我門真的自我感覺時尚，何不將該值引入CSS？我更愿意讓藍(lán)色區(qū)塊基于文檔寬度的100%，而不是元素。（這確是一個難題，即便，如果不能實現(xiàn)我也不會感到驚訝）

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

你也許會想獲取視口的值，可以通過document.documentElement.clientWidth與-Height獲得。

如果你熟悉DOM，你就會知道document.documentElement實際上是元素（HTML文檔的根元素）。然而，可以這么說視口比它（元素）要高一級，它包含了元素。如果你給元素設(shè)置了寬度，這會生效。（雖然這可行，但我并不推薦）

在此情況下document.documentElement.clientWidth與-Height仍舊給出視口尺寸而非元素尺寸。(這是一個奇特的規(guī)則只有在documentElement元素的這個屬性對才起作用，在其他例子中使用的還是實際寬度。）

于是document.documentElement.clientWidth與-Height總是給出視口尺寸不論元素的寬度如何。

另外，視口的尺寸也能由window.innerWidth/Height獲??？這樣的說法也對也不對。

這兩者的正是區(qū)別就在于：document.documentElement.clientWidth與-Height不把滾動條計算在內(nèi)，而window.innerWidth/Height則將滾動條計算在內(nèi)。這算是一些細(xì)枝末節(jié)的概念了。

實際上這兩者是瀏覽器爭霸時代的產(chǎn)物。當(dāng)時，Netscape 只支持window.innerWidth/Height而IE系列只支持document.documentElement.clientWidth與Height。從那時起，所有其他瀏覽器開始支持document.documentElement.clientWidth與Height，但I(xiàn)E依舊不支持window.innerWidth/Height。

在桌面端上擁有兩個屬性對是有一些累贅，但是我們即將看到的，在移動端這是多么大的福音。

我們已經(jīng)知道，通過clientWidth/Height可以在任意情況下獲取視口尺寸。那么如何獲取元素尺寸？通過document.documentElement.offsetWidth與Height。

該屬性為你提供一個方法去獲取塊級元素的寬高。如果你設(shè)置了一個寬度，offsetWidth將會重新計算。

下面讓我們談?wù)勈录鴺?biāo)。當(dāng)一個鼠標(biāo)事件產(chǎn)生，有不少于五種屬性可以為你提供關(guān)于事件確切位置的信息，在我們的討論中，以下三種是比較重要的：

pageX/Y 提供以CSS像素度量的相對于元素的位置信息

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

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

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

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

div.sidebar {
    width: 300px;
}

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

}

目前，sidebar的寬度時300px，但當(dāng)寬度低于400px，sidebar的寬度將變?yōu)?00px。

那么問題來了：我門以哪個寬度作為基準(zhǔn)？

存在兩個相關(guān)的媒體查詢：width/height與device-width/device-height。

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

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

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

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

注：翻完發(fā)現(xiàn)已經(jīng)有翻譯版了，質(zhì)量也不錯，鏈接給上。