移動端適配的各類問題

適配，你懂適配嗎

---

思考題

一個100x100，單位px的div在蘋果6和蘋果6p上的大小同樣嗎？

科普一下

• px， 單位像素
• dp， 物理像素
• dpr，設備像素比
• ppi，每英寸有多少個有用的像素

單位像素是相對單位

在一樣一個設備上，每1個CSS像素所表明的物理像素是能夠變化的(即CSS像素的第一方面的相對性);

在不一樣的設備之間，每1個CSS像素所表明的物理像素是能夠變化的(即CSS像素的第二方面的相對性);

爲何大部分時候設計稿選擇iphone6

隨着蘋果發佈更多尺寸的大屏手機，加上Android生態中紛繁複雜的各類奇葩尺寸，移動設計全面進入「雜屏」時代。

沒有別的緣由，iphone6 只是中型手機的一個表明，從中間尺寸向上和向下適配的時候界面調整的幅度最小。

移動時代，咱們如何作適配的呢

利用 rem 適配頁面

var dc = document.documentElement;

var mt = document.createElement("meta");
mt.name = "viewport";
mt.content = "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no";
dc.firstElementChild.appendChild(mt);

var autoSizie = function () {
    var dw = dc.clientWidth;
    var dpr = Math.min(window.devicePixelRatio, 3);
    //dw / dpr > 750 && (dw = 750 * dpr);
    window.remScale = dw / 750;
    dc.style.fontSize = 200 * (dw / 750) + "px";
    dc.dataset.dpr = dpr;
};
autoSizie();
window.addEventListener('resize', autoSizie, false);
複製代碼

• 爲何是 200 * (document.documentElement.clientWidth / 750) + "px" ？

幀動畫在部分機型上抖動問題

解決方案：

1.原始尺寸作動畫，再用transform：scale（）作縮放處理
2.採用svg替代方案，推薦方案

利用視口單位 vw 適配頁面

div {
    width: 10vw;
    height: 10vw;
    font-size: .12vw;
}
複製代碼

這樣的頁面雖然看起來適配得很好，可是你會發現因爲它是利用視口單位實現的佈局，依賴於視口大小而自動縮放，不管視口過大仍是太小，它也隨着視口過大或者太小，失去了最大最小寬度的限制

解決方案：結合rem單位來實現佈局

1.給根元素大小設置隨着視口變化而變化的 vw 單位，這樣就能夠實現動態改變其大小。
2.限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度

如何作橫屏適配

對屏幕 resize 事件進行監聽，當判斷爲豎屏時將整個根容器進行逆時針 CSS3 旋轉 90 度

var detectOrient = function() {
  var width = document.documentElement.clientWidth,
      height =  document.documentElement.clientHeight,
      $wrapper =  document.getElementById("J_wrapper"),
      style = "";
  if( width >= height ){ // 橫屏
      style += "width:" + width + "px;";  // 注意旋轉後的寬高切換
      style += "height:" + height + "px;";
      style += "-webkit-transform: rotate(0); transform: rotate(0);";
      style += "-webkit-transform-origin: 0 0;";
      style += "transform-origin: 0 0;";
  }
  else{ // 豎屏
      style += "width:" + height + "px;";
      style += "height:" + width + "px;";
      style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
      // 注意旋轉中點的處理
      style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
      style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
  }
  $wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
複製代碼

解決橫屏的dom適配問題

$vw_base: 375;
$vw_fontsize: 20;
html {
  font-size: 20px; //不支持vw單位時，回退到px單位
  font-size: ($vw_fontsize / $vw_base) * 100vw;
}
@media screen and (orientation: landscape) {
  html {
    font-size: 20px;
    font-size: ($vw_fontsize / $vw_base) * 100vh;
  }
}
複製代碼

網頁適配 iPhoneX

viewport-fit

iOS11 新增特性，蘋果公司爲了適配 iPhoneX 對現有 viewport meta 標籤的一個擴展，用於設置網頁在可視窗口的佈局方式，可設置三個值：

• contain: 可視窗口徹底包含網頁內容
• cover：網頁內容徹底覆蓋可視窗口
• auto：默認值，跟 contain 表現一致

env() 和 constant()

iOS11 新增特性，Webkit 的一個 CSS 函數，用於設定安全區域與邊界的距離，有四個預約義的變量：

• safe-area-inset-left：安全區域距離左邊邊界距離
• safe-area-inset-right：安全區域距離右邊邊界距離
• safe-area-inset-top：安全區域距離頂部邊界距離
• safe-area-inset-bottom：安全區域距離底部邊界距離

// 須要適配 iPhoneX 必須設置 viewport-fit=cover，這是適配的關鍵步驟。
<meta name="viewport" content="width=device-width, viewport-fit=cover">
// 根據狀況設置padding或者margin
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
複製代碼

關於移動端適配，就說這麼多了。 路漫漫其修遠兮，吾將上下而求索···