大家都知道viewport标簽對于響應式設計的意義，但是你們可能不清楚，他對于非響應式設計也有相當的作用。如果你的站點還是非響應式的，那麼通過本文你将學會，如何使用viewport标簽增強你站點在mobile裝置上的顯示效果。
Viewport meta标簽一般用在響應式設計中，用來設計mobile裝置viewport的寬度和initial-scale。
大家都知道，iphone預設的viewport寬度是980px。但是你的設計可能不符合這個範圍，有時候寬點，有時候窄點。下面兩個例子将向你展示，在什麼情況下可以使用viewport标簽來增強在mobile裝置上非響應式設計中的展示效果。
截屏左邊的圖檔展示了，站點在沒有使用viewport标簽時的效果，我們可以看到頁面抵到了螢幕的邊緣。截屏右邊的圖檔是我添加了viewport标簽後的效果，我将viewport的寬度設定為1024，這時的頁面和手機螢幕在左右都将保持一定的距離。
如果你設計的太窄，也會出現問題。假設你的設計時非響應式的，容器寬度是700px，這時的效果就像截屏左側的圖檔，将會在手機螢幕右側産生一個很大的空隙。
我們可以通過簡單的添加一個720px寬度的viewport，來修複這個問題。我們沒有對你的設計進行改變，但是iphone會做出調整，來适應你的720px寬度。
一個通常的錯誤是，人們會為非響應式設計設定 initial-scale=1 參數。這樣頁面将會以100%的比例展示，不會進行比例的調整。這樣人們就不得不移動頁面或者執行縮小的操作，來檢視整個頁面。最糟糕的情況是，人們把 user-scalable=no 或者 maximum-scale=1 結合 initial-scale=1一起使用。這會禁用站點的縮放的功能，使用者将不可能通過這種方式檢視到整個頁面。是以你一定要記住，如果你的站點不是響應式設計的，那麼就不要這麼設定！
<a href="http://developer.apple.com/library/IOS/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">iOS Documentation - Viewport Tag</a>
<a href="https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag">Mozilla - Viewport Tag</a>
<a href="http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/">Opera - Viewport Tag</a>
<a href="http://www.cnblogs.com/softlover/tag/HTML5%E5%AE%9E%E8%B7%B5/">HTML5實踐系列</a>
<a href="http://www.vancl.com/?source=kbh1983&sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>