移動端適配的總結

提及移動端頁面也是老生常談了，最近正好在作金融商城移動端的開發，正好梳理下這一塊的知識點，提煉和總結。

一  什麼是移動端頁面

    首先

    不扯那些長篇大論，常見的移動端頁面主要就三種，即H5頁面、手機頁面、以及webview頁面。

    移動端的興起，訪問的流量很大一部分都來自於手機，而一般當手機訪問頁面的時候，每臺設備的分辨率、型號、屏幕尺寸都不一致，致使移動端的兼容適配成爲一個很難忽視的問題。

    爲了讓設計稿在大部分設備上都能有相對滿意的效果，尤爲是在移動端，顯然在pc端的px計算像素的方式已經不適用。

二 幾個名詞

    1 viewport

    如今開發的頁面主要集中在H5頁面這個方向，而說到移動端頁面，就必需要提到viewport.

     先說用到哪，再說是什麼、爲何這麼用。

     隨便打開一個線上的H5的頁面，你都會在head裏發現這個標籤<meata name="viewport" content="initial-scale=..., maximun-sacle=..., minimun-scale=..., user-scalable=no">

     金融商城H5端

     

     淘寶移動端

    

     全部的移動端頁面都用到了這個屬性，那麼這個屬性的定義是什麼？

     

        咱們知道手機的分辨率各有各的不一樣，很難作到一套代碼，全部的機型都適配，再加上一些歷史的緣由，瀏覽器對移動端的屬性支持力度不一樣。因此須要一個折中的方法作到絕大多數設備都能適用。

      

      2. 物理像素(physical pixel)

      一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操做系統的調度下，每個設備像素都有本身的顏色值和亮度值。

      3. 設備獨立像素(density-independent pixel)

      設備獨立像素(也叫密度無關像素)，能夠認爲是計算機座標系統中得一個點，這個點表明一個能夠由程序使用的虛擬像素(好比: css像素)，而後由相關係統轉換爲物理像素。

      因此說，物理像素和設備獨立像素之間存在着必定的對應關係，這就是接下來要說的設備像素比。

      4.設備像素比(device pixel ratio)

      設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關係，它的值能夠按以下的公式的獲得：

      設備像素比 = 物理像素 / 設備獨立像素 // 在某一方向上，x方向或者y方向

      5.rem

      rem 是一個css單位，rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem你們必定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很類似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。（這裏的根元素指的是html）

三 幾種解決方案

      3.1 經過css3 的media queries，即媒體查詢

      這是一個pc的主頁網站，pc和移動端作的統一適配

      

      通常早期手機機型很少的時候採用的方案，原理是經過css3的media queries 的方式查詢設備寬度，來執行不一樣的css代碼。

      這是一段css代碼，在不一樣的屏幕寬度下設置不一樣的font-szie.

            

     優勢

 

• media query對移動和PC維護同一套代碼的時候，基於bootstrap，適用於一些比較穩定的主站
• 圖片修改簡單，只需修改css文件
• 調整屏幕寬度的時候不用刷新頁面便可響應式展現（最大的好處之一）

 

    缺點

 

• 代碼總量比較大，維護不方便，比較臃腫
• 兼顧大屏幕或高清設備，形成其餘設備資源浪費，特別是加載圖片資源，由於css是預讀的，對於首屏加載時間是有影響的，尤爲是圖片比較多，須要加上懶加載
• 爲了兼顧移動端和PC端各自響應式的展現效果，在作一些效果的時候只能犧牲取折中的方案
• 代碼不夠靈活，手機的機型愈來愈多，對新的手機作適配難度比較大，改動比較麻煩。

 

      3.2 flex彈性佈局

      覺得天貓h5首頁爲例

      

      flex 的原理不在贅述，簡單的說就是把父元素下的盒子分紅了幾份，不管屏幕大小，實現等比例的伸縮的一種css3的全新佈局方式。

      

      

       優勢

• flex佈局簡單易用，做爲css3的新屬性，在h5頁面中表現良好，可以動態的彈性伸縮
• 無需糾結於屏幕的尺寸、像素，等等一些問題
• 代碼易於維護，佈局方式簡單、清晰

      缺點

• 很抱歉的是，flex兼容性並很差，在某些機型上會有坑，兼容處理比較麻煩
• flex-direction與justify-content、align-items 等屬性在一些特定的狀況下 並很差用

 

 

      3.3 rem + viewport 縮放 （目前金融商城採用的解決方案）

      最開始的時候，不少採用的是媒體查詢，可是隨着機型的愈來愈多，媒體查詢的方式愈來愈不適用。

      rem上邊咱們已經介紹過，那麼看看具體怎麼用，這是一個簡單的button，當頁面根元素的font-size改變，頁面總體都會跟着改變，至關於根元素是一個基準或者係數

也很像viewport的這種縮放的方式。

      

      既然描述的聽上去很完美，在不一樣機型上，直接改變根元素的font-size值或者viewport的縮放比例就能夠了，的確以前也有單獨用rem或者單獨用viewport作適配的。

可是，最後老生長談的仍是回到了兼容性這個點上，純rem的方式在背景和字體上會存在一些問題，畢竟是基於根元素計算來的，而不是真正的縮放。而viewport的方式在某些

瀏覽器的webview是有兼容性問題的，並且還存在一像素沒法渲染的問題。

      因此折中的咱們採起了rem+viewport縮放的並行方案，根據屏幕的尺寸，動態計算rem的根元素和viewport的縮放比例。

      具體代碼的實現：（因爲內網安全紅線，代碼示例的部分就省去了）

      主要的代碼邏輯：

           口述下，核心函數就是設置rem 和viewport兩個函數，而後執行初始的init

           setViewport部分，主要就是對ios和安卓作了機型的區分，和對是否第一次設置viewport作了判斷。

      

           setRem部分，主要就是根據屏幕的實際寬度設置根元素的font-size

           

           在init函數裏針對一些狀況作了單獨的處理

     

           考慮了屏幕發生旋轉、頁面load的時候，從新計算rem

           

     

四 總結

      佈局方式和屏幕適配原本就是前端的一個比較頭疼的問題，在平常的開發中花費掉了開發者大量的精力和時間，尤爲是處理一些兼容性的問題。

      而適配屏幕的方式也在一直進化和改變，確定會有新的適配方案來代替如今的方案。

      須要勤加總結和學習新的知識，保持本身的更新和迭代。