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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們通過(guò)假定一個(gè)100%縮放的例子展開(kāi)話(huà)題。是時(shí)候給一個(gè)略微嚴(yán)格的定義了：

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

這個(gè)關(guān)于100%縮放的概念對(duì)于后續(xù)的闡釋是非常重要的。但你不必太過(guò)糾結(jié)日常的工作，因?yàn)樵谧烂娑四愕恼军c(diǎn)通常都是以100%縮放被打開(kāi)的，即便用戶(hù)使用了縮放，CSS的像素魔法也會(huì)確保樣式以相同的比例呈現(xiàn)。

讓我們來(lái)關(guān)注一些實(shí)際的尺寸，首先先從screen.width與screen.height說(shuō)起。即用戶(hù)屏幕的高度與寬度。我們用設(shè)備像素來(lái)描述這一尺寸，因?yàn)槠溆肋h(yuǎn)不會(huì)變化：注意這是顯示器的特性而非瀏覽器，不要混淆。

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

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

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

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

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

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

window.pageXOffset與window.pageYOffset用來(lái)衡量文檔中垂直與水平方向上的偏移量。因此，通過(guò)這它們你可以獲取用戶(hù)頁(yè)面的此刻的滾動(dòng)情況。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

另外，視口的尺寸也能由window.innerWidth/Height獲取？這樣的說(shuō)法也對(duì)也不對(duì)。

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

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

在桌面端上擁有兩個(gè)屬性對(duì)是有一些累贅，但是我們即將看到的，在移動(dòng)端這是多么大的福音。

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

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

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

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

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

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

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

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

div.sidebar {
    width: 300px;
}

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

}

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

那么問(wèn)題來(lái)了：我門(mén)以哪個(gè)寬度作為基準(zhǔn)？

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

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

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

因此，在桌面端忘記device-width/device-height擁抱width/height吧。我門(mén)將會(huì)看到在移動(dòng)端情況變的復(fù)雜起來(lái)。

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

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