移動web開發基礎（二）——viewport

　　本文主要研究爲何移動web開發須要設置viewport，且通常設置爲<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">.

　　首先，須要明白viewport是什麼東東。看下圖：

　　對於viewport，直接翻譯成中文就是視口、視見區、觀察區，能夠理解爲窗口。咱們在移動設備上看到的頁面實際上是經過2個viewport渲染以後的樣子。首先是layout viewport，它按照設備默認的viewport的寬度來渲染頁面（好比ios的默認窗口寬度爲980px），咱們在電腦中打開瀏覽器看到頁面時，直接看到了layout viewport。因爲不一樣設備默認寬度不同，因此不能使用默認的980px，而須要設置width=device-width，按照不一樣設備的物理寬度來渲染layout。

　　那麼，如今問題來了：怎麼才能在移動端看到像PC端那樣原汁原味的頁面呢？換句話說，怎麼在移動端保持頁面的排版佈局和良好的用戶體驗呢？

　　因而咱們有了虛擬窗口visual viewport,它把layout viewport按必定的比例縮放，使得頁面能保持排版且移動端瀏覽器不出現橫向滾動條。

　　下面咱們來實踐一下。

　　首先咱們利用現有的PC端開發經驗，寫了一個頁面以下：

 　　在手機看效果以下：

　　在手機上看起來可不太妙，字體那麼小……因而咱們對代碼加以修改，告訴手機端瀏覽器，這個頁面要適配哦。因而，看起來就變成了這樣：

　　看起來是否是好一點了呢？固然，對於viewport，還有更多能夠設置的參數：

　　國內智能機通常都是ios或Android，因此支持經過meta標籤來設置viewport，此外，webOS (Palm) 、 Internet Explorer Mobile, Opera Mini 、Opera Mobile也都支持，因此暫時不討論不支持的狀況。

參考：

一、《Hello,移動Web》http://www.imooc.com/video/9567

二、David Calhoun's blog-《The Viewport Metatag(Mobile Web Part1)》http://davidbcalhoun.com/2010/viewport-metatag/