手淘H5移動端適配方案flexible原始碼分析

移動端適配一直是乙個值得**的問題，在業餘時間我找了一些頁面，檢視了一些廠商對於移動端h5頁面的適配方案，看到了幾個典型的例子，今天就來記錄一下我看到的第乙個典型的例子，也是我們公司目前普通h5專案正在使用的適配方案。

這個適配方案是lib-flexible，在看這個原始碼的同時，我想先來回顧一下幾個概念：

1. viewport

<
mate 
name
="viewport"
content
="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
/>

上面這行**的作用是讓當前viewport的寬度等於裝置寬度，頁面初始縮放比例為1，viewport最大的縮放比例為1，viewport最小的縮放比例也為1，同時不允許使用者拖動縮放。

屬性

作用值型別

width

規定頁面的寬度

可以為字串值"device-width"，或者正整數

initial-scale

規定頁面的初始縮放比例

為數字，可以為小數

maximum-scale

規定頁面的最大縮放比例

為數字，可以為小數

minimum-scale

規定頁面的最小縮放比例

為數字，可以為小數

user-scalable

規定是否允許使用者進行拖動縮放

yes或no，yes是允許，no則不允許

好了，先熟悉到這裡，後面如果想對viewport有更深入透徹的研究，可以檢視ppk大神的關於viewport的三篇文章。

2.裝置畫素比

關於裝置畫素比，我們先賣個關子，後面會說。我們先來看一下另乙個值得思考的問題，我們css中常用的單位px到底和我們移動裝置螢幕上的畫素（pixel）是什麼關係？css裡的1px等於移動裝置螢幕上的1畫素嗎？

首先，我來繞一波，px確實是英文畫素（pixel）的縮寫；但是！！！我們這裡為了將css中的px和裝置中的物理畫素加以區分，css中的單位描述我們就用熟悉的px，裝置的物理畫素，我們則用pixel來加以區分！！！

那麼問題來了，我css中的1px到底等於裝置物理畫素1pixel嗎？----答案是：不一定！！！

那麼為什麼是不一定呢？這裡我們又要了解兩個相關概念：

（1）物理畫素：裝置的物理畫素，顧名思義就是乙個移動裝置在出廠時就固定了的畫素，整個螢幕是由乙個挨著乙個間隙極小的畫素組成的，是螢幕顯示中的基本單元，例如某款手機螢幕解析度：1920*1080畫素，這裡所說的1920就是該款手機螢幕縱向的畫素排布數量，1080就是橫向畫素排布數量，這裡的畫素就是我們所說的物理畫素pixel。

（2）獨立畫素：獨立畫素也可以稱之為邏輯畫素，乙個邏輯畫素是螢幕接受程式控制的最小單位，簡言之我們可以將這裡的邏輯畫素和我們css中的px建立起聯絡，即css中的1px可以控制1個邏輯畫素的顯示。

書接前文，前面提到我們css中的1px不一定等於我們裝置的物理畫素1pixel，那麼什麼情況下等於？什麼情況下又不等於？

等於的情況：早在移動端視網膜螢幕上市以前，絕大部分手機的物理畫素和邏輯畫素其實是對等的，比如iphone 3 的手機螢幕（物理畫素：320x480；邏輯畫素：320x480）。這裡就是css 中的1px等於移動裝置的物理畫素1pixel。也就是說此時，物理畫素÷邏輯畫素=1，這個比值就是裝置畫素比（dpr）。

不等於的情況：當 iphone 4 手機問世時，掀起了視網膜平螢幕的浪潮，以iphone 4 手機螢幕為例（物理畫素：640x960；邏輯畫素：320x480），由此可見iphone 4 相比於iphone 3 的手機螢幕，物理畫素多了一倍，但是邏輯畫素卻沒有變化，那麼iphone 4 的裝置畫素比：物理畫素÷邏輯畫素=2，也就是說 dpr=2 。當然，隨著手機日新月異的發展，dpr=3的情況也是有的，例如總結的下表各主要手機型號的裝置畫素比：

手機型號

物理畫素

獨立畫素（邏輯畫素）

dpr倍圖

iphone 5/5s/5e

640*1136

320*568

2@2x

iphone 6/7/8

750*1334

375*667

2@2x

iphone 6p/7p/8p

1242*2208

414*736

3@3x

手機型號

物理畫素

邏輯畫素

dpr倍圖

android 1

320*480

1@1x

android 2

540*960

360*640

[email protected]

android 3

640*960

320*480

2@2x

android 4

720*1280

360*640

2@2x

android 5

1080*1920

360*640

3@3x

好了，巴拉了這麼多，該切入正題上lib-flexible原始碼了，如下：

;(function
(win, lib) );
if(metael) 
} else
if(flexibleel) 
if(maximumdpr) }}
if (!dpr && !scale) 
else
if (devicepixelratio >= 2 && (!dpr || dpr >= 2)) 
else
} else
scale = 1 /dpr;
}docel.setattribute('data-dpr', dpr); // 給頁面根元素設定自定義屬性data-dpr，值為前面已經賦值好的dpr
if (!metael) 
else
}function
refreshrem()
var rem = width / 10; // 將螢幕寬度分成10份，每乙份為1rem 所以整個螢幕的完整寬度為10rem
docel.style.fontsize = rem + 'px'; // 設定根元素字型大小為計算所得的值
flexible.rem = win.rem =rem;
}win.addeventlistener('resize', function
() , 
false
); win.addeventlistener('pageshow', function
(e) 
}, false
); 
if (doc.readystate === 'complete') 
else
, false
); }
refreshrem();
// 後面這段**是將rem單位值轉換成px的和將px單位的值換算成rem單位的值
flexible.dpr = win.dpr =dpr;
flexible.refreshrem =refreshrem;
flexible.rem2px = function
(d) 
return
val;
}flexible.px2rem = function
(d) 
return
val;
}})(window, window['lib'] || (window['lib'] = {}));

原始碼的分析已經注釋到**後面的注釋中了。通過原始碼的整體分析，我們會發現，lib-flexible的工作原理可以概括為：

通過獲取裝置畫素比dpr進行運算，設定頁面裡name=viewport的mate標籤（包括內部的縮放比例），再在頁面根元素--html上新增data-dpr屬性以及值，並且設定根元素字型大小，來進行頁面適配的。

隨著技術的飛速發展，當前lib-flexible適配方案也在逐漸被更新的適配方案所替代，但是截止目前為止，還沒有發現哪種方案能完全滿足適配各種機型的需要，也會有一些小的問題。lib-flexible是目前用到的比較成熟的適配方案，所以，讓我們一起繼續探索吧~

手淘H5移動端適配方案flexible原始碼分析

h5移動端適配方案

h5移動端適配

H5移動端適配總結

手淘H5移動端適配方案flexible原始碼分析

h5移動端適配方案

h5移動端適配

H5移動端適配總結

相關推薦