移動端前端適配方案20170707

標籤：data-   不同   scale   架構   name   script   var   方便   cti   

1.Meida Queries

meida queries 的方式可以說是我早期採用的布局方式，它主要是通過查詢裝置的寬度來執行不同的 css 代碼，最終達到介面的配置。核心文法是：

@media screen and (max-width: 600px) { /*當螢幕尺寸小於600px時，應用下面的CSS樣式*/  /*你的css代碼*/}

優點

• media query可以做到裝置像素比的判斷，方法簡單，成本低，特別是對移動和PC維護同一套代碼的時候。目前像Bootstrap等架構使用這種方式布局
• 圖片便於修改，只需修改css檔案
• 調整螢幕寬度的時候不用重新整理頁面即可響應式展示

缺點

• 代碼量比較大，維護不方便
• 為了兼顧大螢幕或高清裝置，會造成其他裝置資源浪費，特別是載入圖片資源
• 為了兼顧移動端和PC端各自響應式的展示效果，難免會損失各自特有的互動方式

  彈性布局

它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

根據rem將頁面放大dpr倍, 然後viewport設定為1/dpr.

• 如iphone6 plus的dpr為3, 則頁面整體放大3倍, 1px(css單位)在plus下預設為3px(物理像素)
• 然後viewport設定為1/3, 這樣頁面整體縮回原始大小. 從而實現高清。
  
  

這樣整個網頁在裝置內顯示時的頁面寬度就會等於裝置邏輯像素大小，也就是device-width。這個device-width的計算公式為：

裝置的物理解析度/(devicePixelRatio * scale)，在scale為1的情況下，device-width = 裝置的物理解析度/devicePixelRatio 。

 

通過以下代碼來控制rem基準值(設計稿以720px寬度量取實際尺寸)

!function (d) {    var c = d.document;    var a = c.documentElement;    var b = d.devicePixelRatio;    var f;    function e() {      var h = a.getBoundingClientRect().width, g;      if (b === 1) {        h = 720      }      if(h>720) h = 720;//設定基準值的極限值      g                = h / 7.2;      a.style.fontSize = g + "px"    }    if (b > 2) {      b = 3    } else {      if (b > 1) {        b = 2      } else {        b = 1      }    }    a.setAttribute("data-dpr", b);    d.addEventListener("resize", function () {      clearTimeout(f);      f = setTimeout(e, 200)    }, false);    e()  }(window);

 

移動端前端適配方案20170707