開門見山，本篇將總結(jié)一下MobileWeb的適配方法，即我們常說的H5頁面、手機頁面、WAP頁、webview頁面等等。

本篇討論的頁面指專門針對手機設(shè)備設(shè)計的頁面，并非兼容全設(shè)備的響應(yīng)式布局。 文中提到的 device-width 指 viewport meta 標(biāo)簽中 width 的值，即由瀏覽器指定的值，常用機型對應(yīng)值可參照Screen Sizes。

適配達到的效果是什么？

在不同尺寸的手機設(shè)備上，頁面“相對性的達到合理的展示（自適應(yīng)）”或者“保持統(tǒng)一效果的等比縮放（看起來差不多）”。

適配應(yīng)關(guān)注哪些要素？

一般來說，我們需要關(guān)注的是：字體、高寬間距、圖像（圖標(biāo)、圖片）。

其中，圖像相對要復(fù)雜一些，針對流量、清晰度等問題網(wǎng)上也有比較成熟的解決方案，比如：矢量化、字體化、image-set 等等，在此不做深入。在滿足快速開發(fā)的需求下，我們使用較為偷懶的方式：利用 css 將圖像限定在元素內(nèi)（ img 圖片使用 [max-]width: 100% ，背景圖像使用 background-size ），布局只針對元素進行。

另外要考慮到，設(shè)計師設(shè)計視覺稿時使用什么樣的寬度，才能既滿足設(shè)計自身的需求又能讓前端開發(fā)方便的切圖適配。

舉個例子

圍繞這三要素，我們用一個小例子來說明接下來要介紹的三種方案的實現(xiàn)方式，按 640px 標(biāo)準(zhǔn)需實現(xiàn)的效果如圖：

app.jpg

固定高度，寬度自適應(yīng)

這是目前最通用的一種做法，屬于自適應(yīng)布局，viewport width 設(shè)置為 device-width，以較小寬度（如 320px）的視覺稿作為參照進行布局。垂直方向的高度和間距使用定值，水平方向混合使用定值和百分比或者利用彈性布局，最終達到“當(dāng)手機屏幕變化時，橫向拉伸或者填充空白的效果”。圖像元素根據(jù)容器情況，使用定值或者 background-size 縮放。

粗略瀏覽了下一些大廠的首頁，像百度、騰訊、Facebook、Twitter 都是采用的這種方案。

要點：

以小寬度作為參照是因為如果布局滿足了小寬度的擺放，當(dāng)屏幕變寬時，簡單的填充空白就可以了；而如果反過來就可能造成“擠壞了”，考慮 header 區(qū)域，左測 logo 右測橫向 nav 的情況。

需要小寬度的布局，又需要大寬度的圖像，這是一個矛盾點。

320px 過于窄小，不利于頁面的設(shè)計；只能設(shè)計橫向拉伸的元素布局，存在很多局限性。

兼容性較好。

實現(xiàn)比較簡單，樣式中的尺寸都按照視覺稿二分之一大小設(shè)置，查看效果和代碼。

固定寬度，viewport 縮放

視覺稿、頁面寬度、viewport width 使用統(tǒng)一寬度，利用瀏覽器自身縮放完成適配。頁面樣式（包括圖像元素）完全按照視覺稿的尺寸，使用定值單位 （px、em）即可完成。

優(yōu)點：

開發(fā)簡單：縮放交給瀏覽器，完全按視覺稿切圖。

還原精準(zhǔn)：絕對等比例縮放，可以精準(zhǔn)還原視覺稿（不考慮清晰度的情況下）。

測試方便：在PC端即可完成大部分測試，手機端只需酌情調(diào)整一些細(xì)節(jié)（比如圖標(biāo)、字體混合排列時，因為字體不同造成的對齊問題）。

存在的問題：

像素丟失：對于一些分辨率較低的手機，可能設(shè)備像素還未達到指定的 viewport 寬度，此時屏幕的渲染可能就不準(zhǔn)確了。比較常見的是邊框“消失”了，不過隨著手機硬件的更新，這個問題會越來越少的。

縮放失效：某些安卓機不能正常的根據(jù) meta 標(biāo)簽中 width 的值來縮放 viewport，需要配合 initial-scale 。

文本折行：存在于縮放失效的機型中，某些手機為了便于文本的閱讀，在文本到達 viewport 邊緣（非元素容器的邊緣）時即進行折行，而當(dāng) viewport 寬度被修正后，瀏覽器并沒有正確的重繪，所以就發(fā)現(xiàn)文本沒有占滿整行。一些常用的段落性文本標(biāo)簽會存在該問題。

縮放失效問題需通過 js 動態(tài)設(shè)定 initial-scale

var fixScreen = function() { 
var metaEl = doc.querySelector('meta[name="viewport"]'), 
metaCtt = metaEl ? metaEl.content : '', 
matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/), 
matchWidth = metaCtt.match(/width=([^,\s]+)/); 
if ( metaEl && !matchScale && ( matchWidth && matchWidth[1] != 'device-width') ) { 
var width = parseInt(matchWidth[1]), 
iw = win.innerWidth || width, 
ow = win.outerWidth || iw, 
sw = win.screen.width || iw, 
saw = win.screen.availWidth || iw, 
ih = win.innerHeight || width, 
oh = win.outerHeight || ih, 
ish = win.screen.height || ih, 
sah = win.screen.availHeight || ih, 
w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah), 
scale = w / width; 
if ( ratio < 1) { 
metaEl.content += ',initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale + ',user-scalable=no'; 
} 
} 
} 

文本折行問題可以通過 css 樣式解決。

既然該方案使用固定寬度值，那么這個值是多少合適呢？首要考慮的是主流分辨率，可參考Screen Sizes和友盟指數(shù)的數(shù)據(jù)；其次要考慮設(shè)計部門常用的設(shè)計尺寸，綜合協(xié)調(diào)，最終確定一個合適的值。

該處使用640px來實現(xiàn)例子，查看效果和代碼。

利用 rem 布局

依照某特定寬度設(shè)定 rem 值（即 html 的 font-size），頁面任何需要彈性適配的元素，尺寸均換算為 rem 進行布局；當(dāng)頁面渲染時，根據(jù)頁面有效寬度進行計算，調(diào)整 rem 的大小，動態(tài)縮放以達到適配的效果。利用該方案，還可以根據(jù) devicePixelRatio 設(shè)定 initial-scale 來放大 viewport，使頁面按照物理像素渲染，提升清晰度。

優(yōu)點：

清晰度高，能達到物理像素的清晰度。

能解決 DPR 引起的“1像素”問題。

向后兼容較好，即便屏幕寬度增加、PPI 增加該方案依舊適用。

缺點：

適配 js 需盡可能早進入，減少（避免）viewport 變化引起的重繪。

某些Android機會丟掉 rem 小數(shù)部分。

需要預(yù)編譯庫進行單位轉(zhuǎn)換。

開發(fā)時，css 及 js 都以 16px 作為基數(shù)換算 rem，借助預(yù)編譯庫（以 scss 為例），我們設(shè)定一個動態(tài)尺寸單位 $ppr: 750px/16px/1rem ，即 pixel per rem，任何使用彈性尺寸的地方寫作：width: 100px/$ppr。

動態(tài)調(diào)整 rem 的方法如下：

var fixScreen = function() { 
var metaEl = doc.querySelector('meta[name="viewport"]'), 
metaCtt = metaEl ? metaEl.content : '', 
matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/), 
matchWidth = metaCtt.match(/width=([^,\s]+)/); 
if ( !metaEl ) { // REM 
var docEl = doc.documentElement, 
maxwidth = docEl.dataset.mw || 750, // 每 dpr ***頁面寬度 
dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1, 
scale = 1 / dpr, 
tid; 
docEl.removeAttribute('data-mw'); 
docEl.dataset.dpr = dpr; 
metaEl = doc.createElement('meta'); 
metaEl.name = 'viewport'; 
metaEl.content = fillScale(scale); 
docEl.firstElementChild.appendChild(metaEl); 
var refreshRem = function() { 
var width = docEl.getBoundingClientRect().width; 
if (width / dpr > maxwidth) { 
width = maxwidth * dpr; 
} 
var rem = width / 16; 
docEl.style.fontSize = rem + 'px'; 
}; 
//... 
refreshRem(); 
} 
} 

代碼實現(xiàn)主要參考淘寶網(wǎng)觸屏版的適配方法，查看效果和代碼，其中 scss 的寫法可以參見這里。

注意，較小的背景圖（比如一些 icon）的 background-size 不要使用具體 rem 數(shù)值，裁剪后會出現(xiàn)邊緣丟失。應(yīng)使用與元素等尺寸切圖，設(shè)定 background-size: cover|contain 來縮放。

總結(jié)

總的來看，目前還沒有***的解決方案，這些也只是盡可能的滿足快速開發(fā)、簡單適配需求的通用方案。其中對于一些較為細(xì)節(jié)的問題（比如字體的點陣尺寸、非彈性的定值需求）未做討論。實際開發(fā)過程中，更應(yīng)該綜合考慮項目類型、資源成本、人員配合等多方面的因素，選擇合適的方案。

代碼實現(xiàn)中使用到的 mobile-util.js 對定寬和 rem 適配進行了整合，源碼在此。