为什么要是用 viewport 做适配呢？

目的就是为了，将所有设备布局视口的宽度调整为设计图的宽度

先上完美 viewport 适配代码

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Document</title>
  <style>* {      margin: 0;      padding: 0;
    }.box {      width: 320px;      height: 320px;      background-color: #f60;
    }  </style></head><body>
  <div class="box">test</div>

  <script>(function() {// targetWidth 设计稿物理像素// document.documentElement.clientWidth 理想视口的屏幕宽度// scale 由于document.documentElement.clientWidth大于 targetWidth 物理像素，是放大操作  let targetWidth = 640  let scale = document.documentElement.clientWidth/targetWidth      let meta = document.querySelector("meta[name='viewport']")
      meta.content = "initial-scale="+ scale +", minimum-scale="+ scale +", maximum-scale="+ scale +", user-scalable=no"})()  </script></body></html>复制代码

得到的效果如下：

苹果6 效果 

移动端 viewport 适配_viewport

苹果6 plus 效果

移动端 viewport 适配_viewport_02

两个不同设备上的得到的效果都占50%

viewport 适配的原理

viewport 适配方案中，每一个元素在不同设备上占据的 css 像素的个数是一样的，但是css像素和物理像素的比例是不一样 的，它们都是等比的。

viewport 适配的优缺点

  • 优点：所量就是所得

  • 缺点：没有使用完美视口