關(guān)于適配你需要知道的—MobileWeb適配總結(jié)
開門見山，本篇將總結(jié)一下MobileWeb的適配方法，即我們常說的H5頁面、手機(jī)頁面、WAP頁、webview頁面等等。
本篇討論的頁面指專門針對(duì)手機(jī)設(shè)備設(shè)計(jì)的頁面，并非兼容全設(shè)備的響應(yīng)式布局。 文中提到的 device-width 指 viewport meta 標(biāo)簽中 width 的值，即由瀏覽器指定的值，常用機(jī)型對(duì)應(yīng)值可參照Screen Sizes。
適配達(dá)到的效果是什么？
在不同尺寸的手機(jī)設(shè)備上，頁面“相對(duì)性的達(dá)到合理的展示（自適應(yīng)）”或者“保持統(tǒng)一效果的等比縮放（看起來差不多）”。
適配應(yīng)關(guān)注哪些要素？
一般來說，我們需要關(guān)注的是：字體、高寬間距、圖像（圖標(biāo)、圖片）。
其中，圖像相對(duì)要復(fù)雜一些，針對(duì)流量、清晰度等問題網(wǎng)上也有比較成熟的解決方案，比如：矢量化、字體化、image-set 等等，在此不做深入。在滿足快速開發(fā)的需求下，我們使用較為偷懶的方式：利用 css 將圖像限定在元素內(nèi)（ img 圖片使用 [max-]width: 100% ，背景圖像使用 background-size ），布局只針對(duì)元素進(jìn)行。
另外要考慮到，設(shè)計(jì)師設(shè)計(jì)視覺稿時(shí)使用什么樣的寬度，才能既滿足設(shè)計(jì)自身的需求又能讓前端開發(fā)方便的切圖適配。
舉個(gè)例子
圍繞這三要素，我們用一個(gè)小例子來說明接下來要介紹的三種方案的實(shí)現(xiàn)方式，按 640px 標(biāo)準(zhǔn)需實(shí)現(xiàn)的效果如圖：
app.jpg
固定高度，寬度自適應(yīng)
這是目前最通用的一種做法，屬于自適應(yīng)布局，viewport width 設(shè)置為 device-width，以較小寬度（如 320px）的視覺稿作為參照進(jìn)行布局。垂直方向的高度和間距使用定值，水平方向混合使用定值和百分比或者利用彈性布局，最終達(dá)到“當(dāng)手機(jī)屏幕變化時(shí)，橫向拉伸或者填充空白的效果”。圖像元素根據(jù)容器情況，使用定值或者 background-size 縮放。
粗略瀏覽了下一些大廠的首頁，像百度、騰訊、Facebook、Twitter 都是采用的這種方案。
要點(diǎn)：
以小寬度作為參照是因?yàn)槿绻季譂M足了小寬度的擺放，當(dāng)屏幕變寬時(shí)，簡(jiǎn)單的填充空白就可以了；而如果反過來就可能造成“擠壞了”，考慮 header 區(qū)域，左測(cè) logo 右測(cè)橫向 nav 的情況。
需要小寬度的布局，又需要大寬度的圖像，這是一個(gè)矛盾點(diǎn)。
320px 過于窄小，不利于頁面的設(shè)計(jì)；只能設(shè)計(jì)橫向拉伸的元素布局，存在很多局限性。
兼容性較好。
實(shí)現(xiàn)比較簡(jiǎn)單，樣式中的尺寸都按照視覺稿二分之一大小設(shè)置，查看效果和代碼。
固定寬度，viewport 縮放
視覺稿、頁面寬度、viewport width 使用統(tǒng)一寬度，利用瀏覽器自身縮放完成適配。頁面樣式（包括圖像元素）完全按照視覺稿的尺寸，使用定值單位 （px、em）即可完成。
優(yōu)點(diǎn)：
開發(fā)簡(jiǎn)單：縮放交給瀏覽器，完全按視覺稿切圖。
還原精準(zhǔn)：絕對(duì)等比例縮放，可以精準(zhǔn)還原視覺稿（不考慮清晰度的情況下）。
測(cè)試方便：在PC端即可完成大部分測(cè)試，手機(jī)端只需酌情調(diào)整一些細(xì)節(jié)（比如圖標(biāo)、字體混合排列時(shí)，因?yàn)樽煮w不同造成的對(duì)齊問題）。
存在的問題：
像素丟失：對(duì)于一些分辨率較低的手機(jī)，可能設(shè)備像素還未達(dá)到指定的 viewport 寬度，此時(shí)屏幕的渲染可能就不準(zhǔn)確了。比較常見的是邊框“消失”了，不過隨著手機(jī)硬件的更新，這個(gè)問題會(huì)越來越少的。
縮放失效：某些安卓機(jī)不能正常的根據(jù) meta 標(biāo)簽中 width 的值來縮放 viewport，需要配合 initial-scale 。
文本折行：存在于縮放失效的機(jī)型中，某些手機(jī)為了便于文本的閱讀，在文本到達(dá) viewport 邊緣（非元素容器的邊緣）時(shí)即進(jìn)行折行，而當(dāng) viewport 寬度被修正后，瀏覽器并沒有正確的重繪，所以就發(fā)現(xiàn)文本沒有占滿整行。一些常用的段落性文本標(biāo)簽會(huì)存在該問題。
縮放失效問題需通過 js 動(dòng)態(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 樣式解決。
既然該方案使用固定寬度值，那么這個(gè)值是多少合適呢？首要考慮的是主流分辨率，可參考Screen Sizes和友盟指數(shù)的數(shù)據(jù)；其次要考慮設(shè)計(jì)部門常用的設(shè)計(jì)尺寸，綜合協(xié)調(diào)，最終確定一個(gè)合適的值。
該處使用640px來實(shí)現(xiàn)例子，查看效果和代碼。
利用 rem 布局
依照某特定寬度設(shè)定 rem 值（即 html 的 font-size），頁面任何需要彈性適配的元素，尺寸均換算為 rem 進(jìn)行布局；當(dāng)頁面渲染時(shí)，根據(jù)頁面有效寬度進(jìn)行計(jì)算，調(diào)整 rem 的大小，動(dòng)態(tài)縮放以達(dá)到適配的效果。利用該方案，還可以根據(jù) devicePixelRatio 設(shè)定 initial-scale 來放大 viewport，使頁面按照物理像素渲染，提升清晰度。
優(yōu)點(diǎn)：
清晰度高，能達(dá)到物理像素的清晰度。
能解決 DPR 引起的“1像素”問題。
向后兼容較好，即便屏幕寬度增加、PPI 增加該方案依舊適用。
缺點(diǎn)：
適配 js 需盡可能早進(jìn)入，減少（避免）viewport 變化引起的重繪。
某些Android機(jī)會(huì)丟掉 rem 小數(shù)部分。
需要預(yù)編譯庫進(jìn)行單位轉(zhuǎn)換。
開發(fā)時(shí)，css 及 js 都以 16px 作為基數(shù)換算 rem，借助預(yù)編譯庫（以 scss 為例），我們?cè)O(shè)定一個(gè)動(dòng)態(tài)尺寸單位 $ppr: 750px/16px/1rem ，即 pixel per rem，任何使用彈性尺寸的地方寫作：width: 100px/$ppr。
動(dòng)態(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();
- }
- }
代碼實(shí)現(xiàn)主要參考淘寶網(wǎng)觸屏版的適配方法，查看效果和代碼，其中 scss 的寫法可以參見這里。
注意，較小的背景圖（比如一些 icon）的 background-size 不要使用具體 rem 數(shù)值，裁剪后會(huì)出現(xiàn)邊緣丟失。應(yīng)使用與元素等尺寸切圖，設(shè)定 background-size: cover|contain 來縮放。
總結(jié)
總的來看，目前還沒有***的解決方案，這些也只是盡可能的滿足快速開發(fā)、簡(jiǎn)單適配需求的通用方案。其中對(duì)于一些較為細(xì)節(jié)的問題（比如字體的點(diǎn)陣尺寸、非彈性的定值需求）未做討論。實(shí)際開發(fā)過程中，更應(yīng)該綜合考慮項(xiàng)目類型、資源成本、人員配合等多方面的因素，選擇合適的方案。
代碼實(shí)現(xiàn)中使用到的 mobile-util.js 對(duì)定寬和 rem 適配進(jìn)行了整合，源碼在此。
