大家都知道viewport標簽對于響應式設計的意義，但是你們可能不清楚，他對于非響應式設計也有相當?shù)淖饔?。如果你的站點還是非響應式的，那么通過本文你將學會，如何使用viewport標簽增強你站點在mobile設備上的顯示效果。
Viewport標簽的一般使用
Viewport meta標簽一般用在響應式設計中，用來設計mobile設備viewport的寬度和initial-scale。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在非響應式設計中使用Viewport
大家都知道，iphone默認的viewport寬度是980px。但是你的設計可能不符合這個范圍，有時候?qū)掽c，有時候窄點。下面兩個例子將向你展示，在什么情況下可以使用viewport標簽來增強在mobile設備上非響應式設計中的展示效果。
例子
在iphone查看 Themify 站點。
截屏左邊的圖片展示了，站點在沒有使用viewport標簽時的效果，我們可以看到頁面抵到了屏幕的邊緣。截屏右邊的圖片是我添加了viewport標簽后的效果，我將viewport的寬度設置為1024，這時的頁面和手機屏幕在左右都將保持一定的距離。
另外一個例子
如果你設計的太窄，也會出現(xiàn)問題。假設你的設計時非響應式的，容器寬度是700px，這時的效果就像截屏左側(cè)的圖片，將會在手機屏幕右側(cè)產(chǎn)生一個很大的空隙。
我們可以通過簡單的添加一個720px寬度的viewport，來修復這個問題。我們沒有對你的設計進行改變，但是iphone會做出調(diào)整，來適應你的720px寬度。
<meta name="viewport" content="width=1024">
通常的錯誤
一個通常的錯誤是，人們會為非響應式設計設置 initial-scale=1 參數(shù)。這樣頁面將會以100%的比例展示，不會進行比例的調(diào)整。這樣人們就不得不移動頁面或者執(zhí)行縮小的操作，來查看整個頁面。最糟糕的情況是，人們把 user-scalable=no 或者 maximum-scale=1 結(jié)合 initial-scale=1一起使用。這會禁用站點的縮放的功能，用戶將不可能通過這種方式查看到整個頁面。所以你一定要記住，如果你的站點不是響應式設計的，那么就不要這么設置!
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
