【感謝@千葉_V 的翻譯投稿。如果其他朋友也有不錯的原創或譯文，可以嘗試推薦給伯樂線上。】
在 @伯樂線上官方微博 看到這篇文章的第一部分，資訊量很大。看完之後，對wap網站開發和響應式設計有更深入的認知，可惜伯樂線上遲遲沒有釋出第二部分的譯文，於是我試著翻譯一部分，順便整理下思路。
1.手機瀏覽器與桌面瀏覽器的不同
現在手機瀏覽器的顯示解析度與桌面瀏覽器差不多，但是手機的尺寸比電腦要小很多。一個沒做過響應式處理的網站，在手機和電腦上顯示完全一樣的內容，不可避免的會出現字型被縮小的現象。想象一下電腦裡12號字型縮小好幾倍的效果吧。 所以如果將web網頁移植為wap應用上，還是有許多問題需要考慮。
2.理解兩個viewport的概念
做過wap開發的都知道 html的 <meta name=”viewport”> ,這是一個從iphone引入的meta，現在幾乎所有手機瀏覽器都支援。下邊要講的 viewport 是從手機瀏覽器的角度出發，而不是html，請不要混淆。
把 viewport 分為2個方面來學習，更有助於理解它的原理：
- visual viewport
- layout viewport
想象有個房間，你可以操控它放大變小，現在你站在它的窗戶前。正對著窗戶的牆壁塗滿了壁畫，你走到離視窗1米的位置往房間裡看，假設房間現在很大很大，你能看到對面牆壁上的整個壁畫，但是因為距離太遠了，你看不清壁畫上的題詞，於是你讓房間縮小，縮小到壁畫離你很近，近到能看清壁畫上的細節。在這裡 窗戶就是 visual viewport。牆壁就是 layout viewport
對應到手機瀏覽器，visual viewport就是當前顯示給使用者內容的視窗，你可以拖動或者放大縮小網頁，來看清楚網頁的內容。layout viewport 有網頁的所有內容，他可以全部或者部分展示給使用者。
對於css佈局，特別是用寬度百分比做排版的時候，比率是按照layout viewport 來計算的。也就是說如果一個div相對的寬度50%，使用者在手機瀏覽器放大縮小，DIV的寬度不會一直顯示相對於視窗50%，這個div可能會填滿整個視窗或小到看不見。(可以電腦和手機分別體驗一下這個網址:http://zhaoyuhao.com/demo/34.html)
那麼layout viewport有多寬？不同的裝置、不同的瀏覽器都不相同。 Safari瀏覽器為980px，Opera 850px，Android WebKit 800px， IE 974px.(手機畫素寬度、瀏覽器畫素、裝置畫素是不同的概念，這個需要注意.)
原文對於這兩者還有一些其他的分析，不過不是什麼重點，就不翻了
3.viewport 長寬的測量
上文提到有2個viewport，分別有2對屬性值對應這兩者。(這裡有個故事，按道理桌面瀏覽器是隻需要一個屬性對的，可是由於瀏覽器大戰導致出現了不同標準，剛好手機瀏覽器用上了，也算是一種應禍得福吧。)
layout viewport 的 長寬 (document.documentElement.clientWidth / document.documentElement.clientHeight)
visual viewport 的 長寬 (window.innerWidth / window.innerHeight)
4.screen（裝置） 長寬的測量
screen 的大小其實就是裝置的畫素大小，在針對桌面瀏覽器的開發中，這個數值不重要，你不需要關係電腦螢幕的畫素，但是對於wap開發，這個數值有它的含義，因為手機瀏覽器寬度=裝置寬度，可以通過他們的比例計算到頁面的縮放比例
screen.width/height
5. Scrolling offset
我們有時候要知道visual viewport與layout viewport的相對距離 ：
window.pageXOffset window.pageYOffset
6.Media queries
Media queries 是html5的特性 可以根據 device-width(裝置的寬度 screen.width) 來確定顯示不同CSS。
我在IPHONE4S – CHROME 瀏覽器 ，測試結果如下：
|
1 2 3 |
1. visual viewport 寬度 : 預設980 實際大小與縮放比例相關，可以通過meta的viewport屬性修改 2. layout viewport 寬度 : 980 3. screen.width ：320 |
可見IPHONE4S 在做響應設計的時候 ，width應該是320px。
你也可以在 http://zhaoyuhao.com/demo/35.html 測試你裝置的情況
7.Meta viewport
最後，我們討論下 <meta name=”viewport” content=”width=device-width”> 還記得之前窗戶和壁畫的例子麼？設定viewport就相當於放大和縮小房間，找到合適的畫素給使用者最好的體驗。
我們一步步分析：
1.假設你有個簡單的頁面，不給裡面的DIV設定寬度，預設是相對於 layout viewport 的 100%。對於iphone4S而言，這個寬度的數值是980，所以顯示出來的效果是這樣
2.使用者通過放大網頁比率，縮小visual viewport的值，相對的使用者就能看清楚DIV裡的內容，但是layout viewport並沒有變，所以會出現下邊的效果，部分文件顯示在了瀏覽器外邊，需要通過滾動條檢視全部文件
3.所以為了解決這個問題，引入了viewport標籤。當你看到 <meta name=”viewport” content=”width=device-width”> 說明這個網頁把layout viewport的畫素設定成了裝置的畫素，這樣實現了 visual viewport = layout viewport = screen.width的最佳體驗。
8.小結
文中viewport的介紹不確定是所有瀏覽器產商實現瀏覽器的原理，但是對於wap開發人員而言很有幫助。