适配，你懂适配吗

思考题

一个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 */
复制代码

关于移动端适配，就说这么多了。
路漫漫其修远兮，吾将上下而求索···