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