移動端適配方案研究

      初次接觸移動端的時候，覺得終於能夠不用像pc那樣考慮使人頭疼的ie瀏覽器兼容問題，有強大的css3的幫助，能夠爲所欲爲。。但是後來才發現原來移動端各類層次不齊的終端更會讓人抓耳撓腮，一樣的頁面在不一樣的手機上顯示的徹底不同的效果，因而拋開功能，頁面適配性也成了一個大的課題。

      說到移動端，下面這一行代碼你們必定不陌生：

    <meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

      若是對viewport還有不理解的能夠直接去百度有不少資料，其中，device-width指設備的物理寬度，好比iphone4爲320,剩下的initial-scale與maximum-scale指頁面縮放值及最大縮放值，user-scalable表示是否容許縮放。

      注意device-width並不等於手機的物理像素，一樣寬度的屏幕物理像素可能爲320,640，這就是咱們常說的retina屏。固然也就意味着咱們css中的1px多是1個物理像素，也多是2個物理像素，固然就顯示來講咱們設置1px的border不論是在哪一個屏幕下看起來都是顯示1px的。

      移動端適配的解決方案大概有幾種，現就我所瞭解的主要方法作個簡單總結：    

 

     一.媒體查詢

    相信對響應式網站了解的同窗都看過下面的寫法：

     @media screen and (max-width: 300px){

          ….

     }

     經過css3的媒體查詢，咱們能夠對不一樣的分辨率設定不一樣的樣式，如320px（device-width）下字號14px，而375px字號設爲16px，等等。

     這樣咱們就能夠作到簡單的適配，不過如今市場機型320,360,375等等各類分辨率，若是咱們每個都去U針對的話，代碼量拋開不說，各類計算也會使得效率極其低下。

   

     二.動態改變縮放值

    咱們以前的大神是經過下面這種方法來實現不一樣設備的自適應的，例如咱們的設計稿爲640px爲標準的，那麼咱們寫頁面的時候能夠按實際ps中的px來寫，而後再頁面開頭加入以下js（這種方法與淘寶和網易的作法有殊途同歸之妙，下面咱們會介紹到）：

 1 var sW=$(window).width();
 2 
 3 if(sW>=640&&sW<720){
 4 
 5        $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.5");
 6 
 7 }else if(sW>=720&&sW<750){
 8 
 9        $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.56");
10 
11 }else if((sW>=750&&sW<800)){
12 
13       $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.58");
14 
15 }else if(sW>=800&&sW<1000){
16 
17      $("#screeMeta").attr("content","width=640, initial-scale=1,minimum-scale=0.5, maximum-scale=0.65");
18 
19 }

 

 

     基本思想爲以640爲基準，當在標準iphone4的時候頁面總體縮放0.5，而後再遇到不一樣分辨率的時候賦予不一樣的縮放值，例如對於device-width爲375的狀況下，最大縮放值設爲375/320*0.5。

     這種方法的優勢是咱們能夠徹底按照設計稿來設定css尺寸，經過js的計算來實現不一樣機型的適配。固然缺點就是你當咱們嵌入第三方頁面或者將咱們的頁面嵌入第三方時，因爲縮放值的不一樣會出現兼容性問題。

 

     三.rem自適應

    咱們都知道rem不一樣於em相對於父元素的字體，rem是相對於html根字體來設置的，也就是假設html字體設爲16px，那麼設置爲1rem的元素不論父級元素是哪一層都至關於設置了字體font-size:16px，咱們來看一看淘寶和網易的頁面：

     iphone4：font-size設爲64px，縮放值爲0.5

 

       iphone6：font-size設爲75px，縮放值爲0.5

     

      咱們再來看下元素設置：

    

        除字體外，其餘單位都用rem，這樣經過動態的計算html的px，頁面內容也會作相應比例的變化，字體用px顯示。固然，他們的理念是大屏就要顯示更多的字體。

       關於字體有一個疑問始終沒有搞明白，看下面幾個圖：

        data-dpr=1，安卓機，字體設爲12px，縮放值爲1

   

        data-dpr=2，iphone6，字體設爲24px，縮放值爲0.5

        data-dpr=3，iphone6 plus，字體設爲36px，縮放值爲0.333

    

      看上面3個截圖，能夠看到，經過不一樣的dpr，爲html賦予了不一樣的data-dpr屬性，而後根據不一樣的屏幕設置字體屬性和縮放倍數，如1倍屏12px，縮放爲1,2倍屏縮放爲0.5,3倍屏縮放爲0.3333，不清楚這樣作的目的是什麼，貌似縮放乘以倍數是同樣的效果，也就是能夠用一種設置來實現，不知道理解的是否是有問題？忘大神告知。

      關於淘寶h5兼容，這裏有詳細的介紹。使用Flexible實現手淘H5頁面的終端適配

 

      下面來看下網易的適配：

       安卓1倍屏，device-width爲384，html字體設置爲51.2

 

         iphone2倍屏，device-width爲320，html字體設置爲42

         iphone3倍屏，device-width爲414，html字體設置爲55px

     

       網易的縮放值始終爲1，並且全部屬性包括字號都是用rem來設置，不一樣於淘寶，網易客戶端在各類終端顯示內容始終是一致的，這和咱們上面講過的動態改變縮放值是同樣的。選定一種寬度爲標準，而後其餘機型的設置即爲標準機型*比例值。

       至少就我的來講，我更喜歡網易的這種適配方案，這樣能夠保證個人頁面在每一個機型上都是同樣的效果。

      經過分析上面的幾種方法，咱們能夠簡單寫一個方法，固然下面方法尚未通過大量測試，只講方法，慎用

 1 function autoSize(width){  
 2 
 3     //若是咱們設計稿爲750，則傳入750，不然都認爲是640       
 4     var width=width?width:640;
 5 
 6     //爲了便於計算，在參照寬度下設html字號爲100px，
 7 
 8     var units=width/100;     
 9     var width=document.documentElement.clientWidth;
10     width=width>1080?1080:width;   //設定最大值
11     width=width<=240?240:width;   //設定最小值
12     var calFontSize=width/units;   //計算html字體的字號
13    14     document.documentElement.style.fontSize=calFontSize+'px';
15 }
16 autoSize();
17 window.onresize=function(){
18     autoSize()
19 }