移动端H5页面高清多屏适配方案
背景
-
開發移動端H5頁面
-
面對不同分辨率的手機
-
面對不同屏幕尺寸的手機
視覺稿
在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。
對于移動端開發而言，為了做到頁面高清的效果，視覺稿的規范往往會遵循以下兩點：
1）首先，選取一款手機的屏幕寬高作為基準(以前是iPhone4的320×480，現在更多的是iphone6的375×667)。
2）對于retina屏幕(如: dpr=2)，為了達到高清效果，視覺稿的畫布大小會是基準的2倍，也就是說像素點個數是原來的4倍（對iphone6而言：原先的375×667，就會變成750×1334）。
問題：
對于dpr=2的手機，為什么畫布大小×2，就可以解決高清問題？
對于2倍大小的視覺稿，在具體的css編碼中如何還原每一個區塊的真實寬高(也就是布局問題)?
帶著問題，往下看…
一些概念
在進行具體的分析之前，首先得知道下面這些關鍵性基本概念(術語)。
物理像素(physical pixel)
一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。
設備獨立像素(density-independent pixel)
設備獨立像素(也叫密度無關像素)，可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關系統轉換為物理像素。
所以說，物理像素和設備獨立像素之間存在著一定的對應關系，這就是接下來要說的設備像素比。
設備像素比(device pixel ratio)
設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系，它的值可以按如下的公式的得到：
設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通過window.devicePixelRatio獲取到當前設備的dpr。
在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備，做一些樣式適配(這里只針對webkit內核的瀏覽器和webview)。
綜合上面幾個概念，一起舉例說明下——以iphone6為例：
設備寬高為375×667，可以理解為設備獨立像素(或css像素)。
dpr為2，根據上面的計算公式，其物理像素就應該×2，為750×1334。
用一張圖來表現，就是這樣(原諒我的盜圖)：
上圖中可以看出，對于這樣的css樣式：
| 1 2 | width:?2px; height:?2px; |
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數是不一致的。
在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。 在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。
位圖像素
一個位圖像素是柵格圖像(如：png, jpg, gif等)最小的數據單元。每一個位圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。
談到這里，就得說一下，retina下圖片的展示情況？
理論上，1個位圖像素對應于1個物理像素，圖片才能得到完美清晰的展示。
在普通屏幕下是沒有問題的，但是在retina屏幕下就會出現位圖像素點不夠，從而導致圖片模糊的情況。
用一張圖來表示：
如上圖：對于dpr=2的retina屏幕而言，1個位圖像素對應于4個物理像素，由于單個位圖像素不可以再進一步分割，所以只能就近取色，從而導致圖片模糊(注意上述的幾個顏色值)。
所以，對于圖片高清問題，比較好的方案就是兩倍圖片(@2x)。
如：200×300(css pixel)img標簽，就需要提供400×600的圖片。
如此一來，位圖像素點個數就是原來的4倍，在retina屏幕下，位圖像素點個數就可以跟物理像素點個數形成 1 : 1的比例，圖片自然就清晰了(這也解釋了之前留下的一個問題，為啥視覺稿的畫布大小要×2？)。
這里就還有另一個問題，如果普通屏幕下，也用了兩倍圖片，會怎樣呢？
很明顯，在普通屏幕下，200×300(css pixel)img標簽，所對應的物理像素個數就是200×300個，而兩倍圖片的位圖像素個數則是200×300*4，所以就出現一個物理像素點對應4個位圖像素點，所以它的取色也只能通過一定的算法(顯示結果就是一張只有原圖像素總數四分之一，我們稱這個過程叫做downsampling)，肉眼看上去雖然圖片不會模糊，但是會覺得圖片缺少一些銳利度，或者是有點色差(但還是可以接受的)。
用一張圖片來表示：
針對上面的兩個問題，我做了一個demo。
demo中，100×100的圖片，分別放在100×100，50×50，25×25的img容器中，在retina屏幕下的顯示效果。
條形圖，通過放大鏡其實可以看出邊界像素點取值的不同：
-
圖1，就近取色，色值介于紅白之間，偏淡，圖片看上去會模糊(可以理解為圖片拉伸)。
-
圖2，沒有就近取色，色值要么是紅，要么是白，圖片看上去很清晰。
-
圖3，就近取色，色值介于紅白之間，偏重，圖片看上去有色差，缺少銳利度(可以理解為圖片擠壓)。
愛字圖，可以通過看文字”愛”來區分圖片模糊還是清晰（如果看上去不明顯，請下載原圖）。
?
幾個問題
這里說一下，移動端H5開發，在不同分辨率，不同屏幕手機下會遇到的幾個經典問題。
retina下，圖片高清問題
這個問題上面已經介紹過解決方案了：兩倍圖片(@2x)，然后圖片容器縮小50%。
如：圖片大小，400×600;
1.img標簽
| 1 2 | width:?200px; height:?300px; |
2.背景圖片
| 1 2 3 4 | width:?200px; height:?300px; background-image:?url(image@2x.jpg); background-size:?200px?300px;?//?或者:?background-size:?contain; |
這樣的缺點，很明顯，普通屏幕下：
1）同樣下載了@2x的圖片，造成資源浪費。
2）圖片由于downsampling，會失去了一些銳利度（或是色差）。
所以最好的解決辦法是：不同的dpr下，加載不同的尺寸的圖片。
不管是通過css媒體查詢，還是通過javascript條件判斷都是可以的。
那么問題來了，這樣的話，不就是要準備兩套圖片了嘛？(@1x 和@2x)
我想，做的好的公司，都會有這么一個圖片服務器，通過url獲取參數，然后可以控制圖片質量，也可以將圖片裁剪成不同的尺寸。
所以我們只需上傳大圖(@2x)，其余小圖都交給圖片服務器處理，我們只要負責拼接url即可。
如，這樣一張原圖（點擊預覽），可以類似這樣，進行圖片裁剪：
// 200×200
// 100×100
(ps: 當然裁剪只是對原圖的等比裁剪，得保證圖片的清晰嘛~)
retina下，border: 1px問題
這大概是設計師最敏感，最關心的問題了。
首先得說一下，為什么存在retina下，border: 1px這一說？
我們正常的寫css，像這樣border: 1px;，在retina屏幕下，會有什么問題嗎？
先來，來看看下面的圖：
上面兩張圖分別是在iPhone3gs(dpr=1)和iPhone5(dpr=2)下面的測試效果，對比來看，對于1px的border的展示，它們是一致的，并無區別。
那么retina顯示屏的優勢在哪里，設計師為何覺得高清屏下(右圖)這個線條粗呢？明明和左右一樣的~
還是通過一張圖來解釋(原諒我再次盜圖)：
上圖中，對于一條1px寬的直線，它們在屏幕上的物理尺寸(灰色區域)的確是相同的，不同的其實是屏幕上最小的物理顯示單元，即物理像素，所以對于一條直線，iphone5它能顯示的最小寬度其實是圖中的紅線圈出來的灰色區域，用css來表示，理論上說是0.5px。
所以，設計師想要的retina下border: 1px;，其實就是1物理像素寬，對于css而言，可以認為是border: 0.5px;，這是retina下(dpr=2)下能顯示的最小單位。
然而，無奈并不是所有手機瀏覽器都能識別border: 0.5px;，ios7以下，android等其他系統里，0.5px會被當成為0px處理，那么如何實現這0.5px呢？
最簡單的一個做法就是這樣(元素scale)：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .scale{ ????position:?relative; } .scale:after{ ????content:""; ????position:?absolute; ????bottom:0px; ????left:0px; ????right:0px; ????border-bottom:1px?solid?#ddd; ????-webkit-transform:scaleY(.5); ????-webkit-transform-origin:0?0; } |
我們照常寫border-bottom: 1px solid #ddd;，然后通過transform: scaleY(.5)縮小0.5倍來達到0.5px的效果，但是這樣hack實在是不夠通用(如：圓角等)，寫起來也麻煩。
當然還有其他好多hack方法，網上都可以搜索到，但是各有利弊，這里比較推薦的還是頁面scale的方案，是比較通用的，幾乎滿足所有場景。
對于iphone5(dpr=2)，添加如下的meta標簽，設置viewport(scale 0.5)：
這樣，頁面中的所有的border: 1px都將縮小0.5，從而達到border: 0.5px;的效果。
看一下實現后的效果圖對比(右圖為優化過的)：
然而，頁面scale，必然會帶來一些問題：
1）字體大小會被縮放
2）頁面布局會被縮放(如: div的寬高等)
這兩個問題后面講到…
多屏適配布局問題
移動端布局，為了適配各種大屏手機，目前最好用的方案莫過于使用相對單位rem。
基于rem的原理，我們要做的就是: 針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基準值)。
這里我們提取了一個公式(rem表示基準值)
rem = document.documentElement.clientWidth * dpr / 10
說明：
1）乘以dpr，是因為頁面有可能為了實現1px border頁面會縮放(scale) 1/dpr 倍(如果沒有，dpr=1)。
2）除以10，是為了取整，方便計算(理論上可以是任何值)
所以就像下面這樣，html的font-size可能會：
iPhone3gs: 320px / 10 = 32px
iPhone4/5: 320px * 2 / 10 = 64px
iPhone6: 375px * 2 / 10 = 75px
對于動態改變根節點html的font-size，我們可以通過css做，也可以通過javascript做。
css方式，可以通過設備寬度來媒體查詢來改變html的font-size：
缺點：通過設備寬度范圍區間這樣的媒體查詢來動態改變rem基準值，其實不夠精確，比如：寬度為360px 和 寬度為320px的手機，因為屏寬在同一范圍區間內(<375px)，所以會被同等對待(rem基準值相同)，而事實上他們的屏幕寬度并不相等，它們的布局也應該有所不同。最終，結論就是：這樣的做法，沒有做到足夠的精確，但是夠用。
javascript方式，通過上面的公式，計算出基準值rem，然后寫入樣式，大概如下(代碼參考自kimi的m-base模塊)
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | var?dpr,?rem,?scale; var?docEl?=?document.documentElement; var?fontEl?=?document.createElement('style'); var?metaEl?=?document.querySelector('meta[name="viewport"]'); scale?=?1?/?dpr; dpr?=?window.devicePixelRatio?||?1; rem?=?docEl.clientWidth?*?dpr?/?10; //?設置viewport，進行縮放，達到高清效果 metaEl.setAttribute('content',?'width='?+?dpr?*?docEl.clientWidth?+?', ?????????????????????initial-scale='?+?scale?+?',maximum-scale='?+?scale?+?', ?????????????????????minimum-scale='?+?scale?+?',user-scalable=no'); //?設置data-dpr屬性，留作的css?hack之用 docEl.setAttribute('data-dpr',?dpr); //?動態寫入樣式 docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML?=?'html{font-size:'?+?rem?+?'px!important;}'; //?給js調用的，某一dpr下rem和px之間的轉換函數 window.rem2px?=?function(v)?{ ????v?=?parseFloat(v); ????return?v?*?rem; }; window.px2rem:?function(v)?{ ????v?=?parseFloat(v); ????return?v?/?rem; }; window.dpr?=?dpr; window.rem?=?rem; |
這種方式，可以精確地算出不同屏幕所應有的rem基準值，缺點就是要加載這么一段js代碼，但個人覺得是這是目前最好的方案了。
因為這個方案同時解決了三個問題：
1）border: 1px問題
2）圖片高清問題
3）屏幕適配布局問題
說到布局，自然就得回答一下最初的留下的那個問題：如何在css編碼中還原視覺稿的真實寬高？
前提條件：
1）拿到的是一個針對iPhone6的高清視覺稿 750×1334
2）采用上述的高清方案(js代碼)。
如果有一個區塊，在psd文件中量出：寬高750×300px的div，那么如何轉換成rem單位呢？
公式如下：
rem = px / 基準值;
對于一個iPhone6的視覺稿，它的基準值就是75(之前有提到)；
所以，在確定了視覺稿(即確定了基準值)后，通常我們會用less寫一個mixin，像這樣：
| 1 2 3 4 | //?例如:?.px2rem(height,?80); .px2rem(@name,?@px){ ????@{name}:?@px?/?75?*?1rem; } |
所以，對于寬高750×300px的div，我們用less就這樣寫：
| 1 2 | .px2rem(width,?750); .px2rem(height,?300); |
轉換成html，就是這樣：
| 1 2 | width:?10rem;?//?->?750px height:?4rem;?//?->?300px |
最后因為dpr為2，頁面scale了0.5，所以在手機屏幕上顯示的真實寬高應該是375×150px，就剛剛好。
倘若頁面并沒有scale 0.5，我們的代碼就得這樣：
| 1 2 | .px2rem(width,?375); .px2rem(height,?150); |
這樣的寬高，我們往往是這樣得來的：
1）將750×1334的視覺稿轉成375×667的大小后，再去量這個區塊的大小(感覺好傻)。
2）在750×1334量得區塊寬高是750×300px后，再口算除以2(感覺好麻煩)。
最后給出一張沒有布局適配(上圖)和用rem布局適配(下圖)的對比圖：
(上面的手機分別是：iPhone3gs, iPhone5, iPhone6)
很明顯可以看出，rem適配的各個區塊的寬高都會隨著手機屏寬而改變，最最明顯的可以看一下圖片列表那部分，最后一張圖視覺稿要求只出現一點點，rem布局在任何屏幕下都顯示的很好。
字體大小問題
既然上面的方案會使得頁面縮放(scale)，對于頁面區塊的寬高，我們可以依賴高清視覺稿，因為視覺稿本來就×2了，我們直接量就可以了，那么對于字體該如何處理呢？
對于字體縮放問題，設計師原本的要求是這樣的：任何手機屏幕上字體大小都要統一，所以我們針對不同的分辨率(dpr不同)，會做如下處理：
| 1 2 3 4 | font-size:?16px; [data-dpr="2"]?input?{ ??font-size:?32px; } |
(注意，字體不可以用rem，誤差太大了，且不能滿足任何屏幕下字體大小相同)
為了方便，我們也會用less寫一個mixin：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .px2px(@name,?@px){ ????@{name}:?round(@px?/?2)?*?1px; ????[data-dpr="2"]?&?{ ????????@{name}:?@px?*?1px; ????} ????//?for?mx3 ????[data-dpr="2.5"]?&?{ ????????@{name}:?round(@px?*?2.5?/?2)?*?1px; ????} ????//?for?小米note ????[data-dpr="2.75"]?&?{ ????????@{name}:?round(@px?*?2.75?/?2)?*?1px; ????} ????[data-dpr="3"]?&?{ ????????@{name}:?round(@px?/?2?*?3)?*?1px ????} ????//?for?三星note4 ????[data-dpr="4"]?&?{ ????????@{name}:?@px?*?2px; ????} } |
(注意：html的data-dpr屬性就是之前js方案里面有提到的，這里就有用處了)
根據經驗和測試，還是會出現這些奇奇葩葩的dpr，這里做了統一兼容~
用的時候，就像這樣：
| 1 | .px2px(font-size,?32); |
當然對于其他css屬性，如果也要求不同dpr下都保持一致的話，也可以這樣操作，如：
| 1 2 | .px2px(padding,?20); .px2px(right,?8); |
?
?
?轉載于?http://www.cocoachina.com/webapp/20150715/12585.html?
總結
以上是生活随笔為你收集整理的移动端H5页面高清多屏适配方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [BZOJ4403]序列统计
- 下一篇： 《AngularJS深度剖析与最佳实践》