本文主要研究為什麼移動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也都支持，所以暫時不討論不支持的情況。

參考：

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

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