Html 5 屏幕適配解決方案：馬太航.doc

Html 5 屏幕適配解決方案隨著移動和HTML5的持續(xù)火熱，移動市場涌現(xiàn)出了大量基于HTML5開發(fā)的移動APP。由于移動市場的高速發(fā)展，移動設(shè)備的快速更新，使得市場上出現(xiàn)了種類繁多具有各種屏幕尺寸和分辨率的移動設(shè)備，開發(fā)者在開發(fā)HTML5應(yīng)用時(shí)就必須考慮所有屏幕尺寸和分辨率類型的應(yīng)用場景，為移動應(yīng)用做屏幕尺寸和分辨率的適配工作。想要為移動應(yīng)用做屏幕適配首先要了解一些概念。物理像素，即屏幕上的最小顯示單元；設(shè)備獨(dú)立像素，即由程序使用的虛擬像素（如CSS中的px）；設(shè)備像素比，設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素，定義了物理像素與設(shè)備獨(dú)立像素間的對應(yīng)關(guān)系，簡稱dpr（device pixel ratio）。在不同屏幕上，CSS像素呈現(xiàn)的大?。ㄎ锢沓叽纾┦且恢碌?，不同的是一個(gè)CSS像素對應(yīng)的物理像素個(gè)數(shù)是不同的。舉例來講，普通屏幕的每個(gè)像素點(diǎn)與CSS中定義的像素點(diǎn)大小相同，但是蘋果的retina屏幕一個(gè)CSS像素對應(yīng)4個(gè)物理像素。因此，在開發(fā)應(yīng)用時(shí)就需要對不同屏幕（高清和非高清）進(jìn)行區(qū)分處理。就一張普通的圖片（PNG、JPG、GIF等）來講，其最小的數(shù)據(jù)單元稱為位圖像素。理論上，一個(gè)位圖像素對應(yīng)一個(gè)物理像素，這樣圖片才能完美的清晰展示，但是對于高清屏幕（Retina）就會出現(xiàn)位圖像素點(diǎn)不夠的情況，這樣會導(dǎo)致圖片模糊。遇到這種情況，通常要準(zhǔn)備兩張圖片，如一張200300（CSS px），并提供一張400600的高清圖片，這樣位像素點(diǎn)就是原來的4倍，在retina屏幕下正好與其物理像素點(diǎn)一一對應(yīng)，圖片自然就清晰了。當(dāng)然，具體要加載那種圖片是有dpr來判斷的，在JavaScript中，可以通過window.devicePixelRatio獲取到當(dāng)前設(shè)備的dpr，在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對不同dpr的設(shè)備，做一些樣式適配。與圖片問題類似，高清屏幕還存在一種“失真”的問題，即border:1px問題。對于border:1px在所有屏幕中的物理大小其實(shí)是相同的（下圖灰色區(qū)），但這怎能體現(xiàn)出高清呢？對于retina屏幕來說，一個(gè) CSS像素由4個(gè)物理像素組成，因此其最細(xì)的線條并不是1px，而是0.5px，如下圖紅色框。而一般情況下設(shè)計(jì)師想要的retina下border: 1px，其實(shí)就是1物理像素寬，這種更細(xì)粒度的劃分也帶來的視覺上的高清。當(dāng)然，除了高清上的適配，還存在著屏幕大小上的適配，即頁面布局問題。目前解決該問題最好用的方案是使用相對單位（rem），主要工作就是針對不同手機(jī)屏幕尺寸和dpr動態(tài)的改變根節(jié)點(diǎn)html的font-size大小(基準(zhǔn)值)。rem=document.documentElement.clientWidth * dpr / 10，乘以dpr是因?yàn)轫撁嬗锌赡転榱藢?shí)現(xiàn)1px border縮放1/dpr倍（如果沒有，dpr=1），除以10是為了取整，方便計(jì)算?？梢酝ㄟ^JavaScript來實(shí)現(xiàn)，使用公式計(jì)算出基準(zhǔn)值rem，然后寫入樣式，代碼如下：var dpr, rem, scale;var docEl = document.documentElement;var fontEl = document.createElement(style);var metaEl = document.querySelector(metaname=viewport);scale = 1 / dpr;dpr = win.devicePixelRatio | 1;rem = docEl.clientWidth * dpr / 10;/ 設(shè)置viewport，進(jìn)行縮放，達(dá)到高清效果metaEl.setAttribute(content, width= + dpr * docEl.clientWidth + ,initial-scale= + scale + ,maximum-scale= + scale + , minimum-scale= + scale + ,user-scalable=no);/ 設(shè)置data-dpr屬性，留作的css hack之用docEl.setAttribute(data-dpr, dpr);/ 動態(tài)寫入樣式docEl.firstElementChild.appendChild(fontEl);fontEl.innerHTML = htmlfont-size: + rem + px!important;/ 給js調(diào)用的，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)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;那么如何在CSS編碼中實(shí)現(xiàn)真實(shí)布局呢？舉例來講，一個(gè)針對iPhone6（rem=375 * 2 / 10 = 75）的高清視覺稿7501334px，采用上面JS代碼方案。如果有一塊750300px的div，用less這樣寫：/ 例如: .px2rem(height, 80);rem在iphone6時(shí)為75.px2rem(name, px , rem) name: px / rem * 1rem;.px2rem(width, 750);.px2rem(height, 300);轉(zhuǎn)化成HTML就變成了104rem，再經(jīng)過0.5的縮放，在屏幕中的實(shí)際現(xiàn)實(shí)