移動端適配問題

1、適配問題

①移動端Web頁面，即常說的H5頁面、手機頁面、webview頁面等。

②適配問題產生的緣由：手機設備屏幕尺寸不一，作移動端的Web頁面，須要考慮在安卓/IOS的各類尺寸設備上的兼容，針對移動端設備的頁面，設計與前端實現怎樣作能更好地適配不一樣屏幕寬度的移動設備。

③適配的目標：在不一樣尺寸的手機設備上，頁面相對性的達到合理的展現（自適應）或者保持統一效果的等比縮放（看起來差很少）

④參考文章：移動端解決適配問題

2、移動端的一些概念

①viewport視口：是移動端特有的，是一個虛擬的區域，承載網頁的。承載關係是瀏覽器、viewport、網頁。參考MDN文檔

②流式佈局：就是百分比佈局，非固定像素，內容向兩側填充

②物理像素(physical pixel)：又被稱爲設備像素，是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。所謂的一倍屏、二倍屏(Retina)、三倍屏，指的是設備以多少物理像素來顯示一個CSS像素，也就是說，多倍屏以更多更精細的物理像素點來顯示一個CSS像素點，在普通屏幕下1個CSS像素對應1個物理像素，而在Retina屏幕下，1個CSS像素對應的倒是4個物理像素。

③CSS像素：是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，CSS像素稱爲與設備無關的像素(device-independent pixel)，簡稱DIPs。CSS像素顧名思義就是咱們寫CSS時所用的像素。

④設備像素比dpr(device pixel ratio)：其定義了物理像素和設備獨立像素的對應關係。它的值能夠按下面的公式計算獲得：設備像素比 ＝ 物理像素 / 設備獨立像素。在Retina屏的iphone上，devicePixelRatio的值爲2，也就是說1個css像素至關於2個物理像素。一般所說的二倍屏(retina)的dpr是2, 三倍屏是3。(一般說的二倍背景圖就是解決失真問題)

⑤屏幕像素密度PPI(pixel per inch)：屏幕像素密度是指一個設備表面上存在的像素數量，它一般以每英寸有多少像素來計算(PPI)。屏幕像素密度與屏幕尺寸和屏幕分辨率有關，在單一變化條件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

2、主流適配方案（標準的移動端適配方案：使用流式佈局和viewport設置相結合）

①適配目標：

• 網頁內容的寬度必須和瀏覽器保持一致
• 默認顯示的縮放比例和PC端保持一致（縮放比例1.0）
• 不容許用戶自行縮放網頁

②viewport的相關的屬性（若是任何設置都沒有，就是默認設置）

    <meta name="viewport" content="">
    <!-- 
        width:能夠設置寬度(device-width當前設備的寬度)
        height:能夠設置高度
        initial-sacle:能夠設置默認的縮放比例(1.0)
        user-scalable:能夠設置是否容許用戶自行縮放(=no)
        maxinum-scale:能夠設置的最大縮放比例
        mininum-scale:能夠設置的最小縮放比例
     -->

③適配設置：（Emment語法：mate：ev + tab鍵）

<meta name="viewport" content="width=device-width,initial-sacle=1.0,user-scalable=no">

3、非主流適配方案(手淘方案)

參考文章：手機淘寶的flexible設計與實現