終於能看到中文版的PPK大牛寫的viewport故事了，感謝翻譯的作者。看完之後，之前需要混亂的概念也逐漸清晰了，以下記錄一些要點，以備不時翻看，詳情內容請移步原文和譯文網址拜讀。

以下為本人摘錄和自己理解的內容(其中摘錄部分均來自上述兩篇譯文中)

以下知識點是關於桌面瀏覽器的

Device pixels and CSS pixels(裝置畫素和CSS畫素)

裝置畫素

       指裝置的解析度,其值可以（通常情況下）從screen.width/height屬性中讀出.

       同一個裝置的裝置畫素固定不變(即數字大小不變，每裝置畫素代表的長度也不變)

       開發者可以忽略這個值。

CSS畫素

       同一個裝置的CSS畫素數字大小不變，但每CSS畫素代表的長度會變，即CSS畫素會伸縮。

       CSS畫素就是樣式表裡控制元素如何被渲染的畫素。

Zoom (縮放)

現代瀏覽器中實現縮放的方式都是「拉伸」畫素：即每畫素單位代表的長度發生變化，而畫素總數字不變。

100%縮放：

在縮放比例100%的情況下一個CSS畫素完全等於一個裝置畫素

       所以，如果在一個解析度為320px*580px的裝置上，將一個寬128px的元素被使用者放大到200%，那麼：
       a、裝置畫素沒變，還是裝置的解析度320px*580px;
       b、這個元素的CSS畫素的數字沒變，還是128px，但每CSS畫素代表的長度變為原來的2倍，即這個元素佔據了256個裝置畫素的空間;
        c、縮放改變的是每CSS畫素單位代表的長度，而裝置畫素保持不變

viewport

viewport的功能是用來約束你網站中最頂級包含塊元素即html標籤。

因為在理論上，html標籤的寬度是被viewport的寬度所限制的。html標籤元素使用viewport寬度的100%,而viewport的寬度等於瀏覽器視窗寬度。

viewport不是一個HTML結構，所以你不能用CSS來改變它。它在桌面環境下只是擁有瀏覽器視窗的寬度和高度。在移動環境下它會有一些複雜。

viewport的尺寸總可以通過document.documentElement.clientWidth和-Height得到。

html標籤本身的尺寸總可以通過document.documentElement.offsetWidth和-Height得到

媒體查詢

原理很簡單：你可以宣告「只在頁面寬度大於，等於或者小於一個特定尺寸的時候才會被執行」的特殊的CSS規則。

width/height使用和documentElement .clientWidth/Height（換句話說就是viewport寬高）一樣的值。它是工作在CSS畫素下的。
device-width/device-height使用和screen.width/height（換句話說就是螢幕的寬高）一樣的值。它工作在裝置畫素下面。

使用哪個？當然是width。Web開發者對裝置寬度不感興趣，這個是瀏覽器視窗的寬度。

在桌面環境下去使用width而去忘記device-width吧。

以下知識點是關於移動瀏覽器的

兩個viewport

visual viewport和layout viewport的形象定義：

George Cummins在Stack Overflow上對基本概念給出了最佳解釋：

Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

譯文：

       把layout viewport想像成為一張無法改變大小或形狀的大圖。現在想像你有一個小一些的框架，你通過它來看這張大圖。這個小框架的周圍包裹著不透明材料，掩蓋了你所有的視線，你只能看到這張大圖的一部分。你通過這個框架所能看到的大圖的一部分就是visual viewport。你可以後拉(放大)框架以觀看整個圖片，或者你可以靠近一些（縮小框架）只看區域性。你也可以改變框架的方向，但是大圖（layout viewport）的大小和形狀永遠不會變。

visual viewport

visual viewport是頁面當前顯示在螢幕上的部分。

使用者可以通過滾動來改變他所看到的頁面的部分，或者通過縮放來改變visual viewport的大小。

通過window.innerWidth/Height可獲取visual viewport的大小。但當用戶縮小或者放大的時候，度量的尺寸會發生變化，因為螢幕上的CSS畫素會增加或者減少。
        該方式完全支援iPhone，Symbian，BlackBerry
       該方式在Android，Bolt，MicroB和NetFront上返回以CSS畫素為單位的layout viewport尺寸。
       IE不支援該方式，只能通過
document.documentElement.offsetWidth/Height獲取visual viewport的尺寸。

layout viewport

document.documentElement.clientWidth和-Height可以獲取layout viewport的尺寸,該方法完全支援Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyfire, Obigo。

CSS畫素

通過window.innerWidth來獲取當前螢幕上有多少個CSS畫素;
通過window.innerWidth也可獲取visual viewport的寬度;

CSS佈局，尤其是百分比寬度，是以layout viewport做為參照系來計算的，它被認為要比visual viewport寬。

html標籤

document.documentElement.offsetWidth/Height提供了以CSS畫素為單位的html標籤的整個尺寸

縮放

兩個viewport都是以CSS畫素度量的。但是當進行縮放（如果你放大，螢幕上的CSS畫素會變少）的時候，visual viewport的尺寸會發生變化，layout viewport的尺寸仍然跟之前的一樣。（如果不這樣，你的頁面將會像百分比寬度被重新計算一樣而經常被重新佈局。）