做移動Web開發也有一年多的時間了,雖然手機上瀏覽器對於PC上來說很友好了,但是手機各種設備的顯示尺寸分辨率大小不一也要花大心思兼容它們.
關於HTML5中Viewport的文章Google,百度一搜有很多.記錄一些自己理解的內容:
Viewport屬性詳解
Viewport:字面意思為視圖窗口,在移動 web 開發中使用.表示將設備瀏覽器寬度虛擬成一個特定的值(或計算得出)這樣利於移動 web 站點跨設備顯示效果基本一致.
基礎寫法:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
參數解釋:
width 控制Viewport的寬度,可以指定一個值或者設備的寬度,如device-width為設備的寬度(單位為設備縮放比例1:1的像素),這里設置的寬度等於設備寬度;
initial-scale 初始縮放,即頁面初始縮放程度.對應的值是一個浮點值,這里是一個乘積關系,頁面呈現大小等於設置的寬度乘以initial-scale的值;
maximum-scale 最大縮放,即允許用戶縮放的最大比例,也是乘積關系.一般設置為1:1的比例不會讓用戶縮放的;
minimum-scale 最小縮放,如上;
user-scalable 用戶是否可以手動縮放,一般值設為no,不允許用戶縮放;
這段代碼的大意是讓viewport的物理寬度等於設備的分辨率,不允許用戶縮放.
第一次接觸移動web的時候不知道該怎么做,就去看天貓的移動站的 view-source 研究了幾個小時復制了這一段代碼然后開始寫第一個webapp了.
這種寫法是還原設計稿,讓頁面保持和設備分辨率一樣,不做任何縮放.對於移動web來說需要豐富經驗支持才能寫好一個好的響應式頁面.高質量的頁面效果請選擇此方案.
特殊寫法:
<meta name="viewport" content="target-densitydpi=device-dpi,width=640" >
簡單而粗暴的解決響應式方案,不過弊端也比較大需要謹慎衡量.
target-densitydpi 這個屬性可以改變設備的默認縮放medium-dpi是target-densitydpi的默認值,如果我們顯式定義target-densitydpi=device-dpi,那么設備就會按照真實的dpi來渲染頁面.
如果設計稿是按照640px寬度設計的話,制作頁面的時候就按照設計稿的原始尺寸制作,頁面會默認縮放和手機分辨率一樣的寬度顯示.會節省很多解決響應式問題的時間.
優點這么突出那么弊端呢,當然也很突出:
- 對於高密度和超高密度的手機設備,頁面(特別是圖片)會失真,而且密度越多,失真越厲害.
- 對於Android這么強大的陣營面前,設備都數不清了更別說設備自帶的瀏覽器.web頁面會呈現不是滿屏顯示的情況,右邊會出現留白很怪異.
對於第二點我沒有找到完美的解決辦法.出現這情況可能是target-densitydpi和device-dpi設備DPI之間的換算.選擇此方案需要放棄部分用戶,所以要衡量得失.(簡單而粗暴是有代價的,任需謹慎...)
小結
了解完Viewport對寫移動web來說簡單了很多,要做的只是拿出實際行動多寫了.對於Viewport兩種寫法可以靈活運用,要做到的是以最精簡的HTML、CSS完成頁面呈現.
補充
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
minimal-ui iOS 7.1的Safari新增的屬性在瀏覽網頁，滾動之后，會觸發隱藏 location bar 和 tool bar,但是在iOS 8又給刪除了.