Web移動端適配總結

移動端適配的相關概念以及幾種方案總結

適配相關概念

1. 佈局視口（layout viewport）：html元素的上一級容器即頂級容器，用於解決頁面在手機上顯示的問題。大部分移動設備都將這個視口分辨率設置爲980px，因此PC上的網頁基本上能在手機上呈現，只不過看上去很小，通常默承認以經過手動縮放網頁。獲取當前佈局視口用document.documentElement.clientWidth
2. 視覺視口（visual viewport）：指用戶可見頁面區域，即屏幕顯示器的物理像素。獲取當前的視覺視口能夠用window.innerWidth
3. 理想視口（ideal viewport）：也就是咱們一般說的屏幕分辨率。好比Iphone5屏幕分辨率是320。

使用viewport元標籤控制佈局

以下的viewport元標籤的屬性
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

如下是每一個屬性的介紹：

屬性名	取值	描述
width	正整數或device-width	定義layout viewport的值
height	正整數或device-height	定義viewport height，單位爲像素，通常不用
initial-scale	[0,0 - 10.0]	定義初始縮放值。好比：設置initial-width=1.5 就是將visual viewport設置成ideal viewport寬度的1 /1.5倍。
maximum-scale	[0.0 - 10.0 ]	用戶可以放大的最大比例
minimum-scale	[0,0 - 10.0]	用戶能縮小的最小比例，通常不設置，由於過小的字不方便閱讀
user-scalable	yes/no	定義是否容許用戶手動縮放頁面，默認值爲yes

width的詳細介紹：設置爲device-width時表示layout viewport的寬度等於ideal viewport的值。同時設置width與intital-scale時，最終的視口寬度等於二者較大的那一個。也就是說：

1. 當layout viewport小於visual viewport時，視口寬度最終是visual viewport的值（經測試，layout viewport的值也會自動變成visual viewport）
2. 當layout viewport大於visual viewport時，視口寬度最終是layout viewport的值（經測試，visual viewport的值不會變成這時layout viewport的值）

initial-scale的詳細介紹：縮放比例 = ideal layout / visual layout 。ideal viewport是不會改變的，這個值是爲了改變visual viewport。縮放比例也有默認值，沒有設置initial-scale時，瀏覽器會取適當的縮放比例使佈局視口正好鋪滿屏幕即有 可視視口（visual viewport）尺寸=理想視口尺寸（ideal viewport）。也就是說設置width=device-width與設置initial-scale=1.0效果相同。

方案

1. 荔枝FM的方案：將layout viewport定義爲設計稿的寬度，這樣的好處在於css像素對應設計稿的px（以640px爲例），不須要進行單位換算。可是有幾點須要注意的地方。
   1. 爲了保證最終的視口的值都是640px，而不會變成其餘值（前面說過，最終視口的值會取width與initial-scale屬性的最大值）。要把visual viewport設置成與layout viewport同樣大，即設置initial-scale的值爲 ideal viewport / 640。以前也有一個屬性代替了這個操做，target-densitydpi=device-dpi,但資料顯示target-densitydpi=device-dpi是一個被拋棄的屬性，不推薦使用
2. 網易的純REM方案：
   1. 採用理想視口做爲可視視口的尺寸，只須要把縮放比定爲1。<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, minimum-scale=1, user-scalable=no">

   2. 計算 html 元素的 font-size

      750px 是設計稿的寬度（以iphone6的物理像素數爲標準），100是指望的換算比例，即設計稿中 100px 的長度對應css中 1rem，將設計稿中的長度數值除以 100 獲得的就是以 rem 爲單位的 css 長度的數值，設計稿的寬換算爲以 rem 爲單位的 css 長度應爲 (750/100) rem，同時設計稿的寬對應可視視口的寬，即有 (750/100) rem = 可視視口寬，1 rem = 可視視口寬 * (100/750)，(100/750)就是咱們要的係數

   在頁面初始化時設置一下 html 元素的 font-size：

   document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';

3. 最後一種方案也是最合理的---來自於手淘的最佳實踐
   1. 以上兩種方案都存在一個問題，就是在retina屏幕上沒有處理dpr（device pixel ratio）的反作用，何爲dpr：物理像素 / 設備獨立的像素（ideal viewport）。在JS中能夠經過window.devicePixelRatio獲取當前設備的dpr。
   2. 爲什麼要處理dpr：在retina屏幕上，物理像素會被放大爲本來的dpr倍。這時候就會存在如下幾個問題
      • 圖片變模糊了
      • border: 1px問題，邊框天然會被放大爲dpr倍
      • ...
   3. 解決方案：使用initial-scale=1/dpr對含有px單位的元素作處理，可是單純這麼作會致使字體元素的大小都會縮小。如何解決這個問題呢？答案就是在第二種方案的根元素設置fontSize的基礎上再乘以一個dpr，這樣對於以rem衡量的元素又能正常適配了。

參考閱讀：

• 網易和淘寶移動WEB適配方案再分析
• 移動端高清、多屏適配方案
• 說說移動前端中 viewport （視口）