HTML5之Viewport詳解

作移動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寬度設計的話,製做頁面的時候就按照設計稿的原始尺寸製做,頁面會默認縮放和手機分辨率同樣的寬度顯示.會節省不少解決響應式問題的時間.

優勢這麼突出那麼弊端呢,固然也很突出:

1. 對於高密度和超高密度的手機設備,頁面(特別是圖片)會失真,並且密度越多,失真越厲害.
2. 對於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又給刪除了.