HTML-HTML5+CSS3權威指南閱讀（5、深刻理解viewport）

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開發人員而言頗有幫助。

轉自:http://blog.jobbole.com/44903/