device-width和viewport

在做移动端是，最大的需求就是要适配多端，当拿到UI 的设计稿时，上面的尺寸是这样的

11.jpg

width 和height都是固定的，而且字体大小也是成倍数固定的，比如font-size: 32px;

此时要做的就是适配，按比例动态缩放

<script>
  var deviceWidth = parseInt(window.screen.width);  //获取当前设备的屏幕宽度 
  var deviceScale = deviceWidth / 750;  //得到当前设备屏幕与750之间的比例，之后我们就可以将网页宽度固定为750px 
  var ua = navigator.userAgent; 
//获取当前设备类型（安卓或苹果） 
  if (/Android (\d+.\d+)/.test(ua)) { 
    var version = parseFloat(RegExp.$1); 
    if (version > 2.3) { 
        document.write('<meta name="viewport" content="width=750,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-[图片上传中...(433.jpg-7f5c29-1590044775526-0)]
dpi">'); 
    } else { 
        document.write('<meta name="viewport" content="width=750,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />'); 
    } 
  } else { 
    document.write('<meta name="viewport" content="width=750, user-scalable=no, viewport-fit=cover">'); 
  }
</script>

直接将代码引入，即可适配多端，而此时css中的width和height可以尽情的使用px

注意一下：代码中的750，就是第一张UI设计稿的width

此外，苹果的安全距离可以通过在meta中的content追加viewport-fit=cover，并在页脚的fixed按钮组的样式中的height改为对应带constant和env处理过的：

.footerButton { 
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    text-align: center;
    line-height: 3;
    padding: 32px 30px;
    background-color: #FFFFFF;
    // 此处开始重点
    height: 144px;
    box-sizing: content-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom)
}

并且向上滑动时，页面的底部追加一段安全距离div：

.safebottom {
    height: 144px;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

注：设置 box-sizing: content-box; ，因为在通常情况下 css 在 reset 阶段一般都设置了 * {box-sizing: border-box;} 这样一来设置 padding 就不能向外扩展距离了，所以在这里我们要把他改回 content-box