viewport 适配

原理：

通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度

实现：

(function(){
  // 设置设计稿的宽度
    var targetW = 375;    

  // 计算当前视口与设计稿的比值
    var scale = document.documentElement.clientWidth / targetW;

  // 获取 meta[name='viewport'] 元素
  var meta =    document.querySelector("meta[name='viewport']");

  // 设置meta元素 content的值，重点是设置 initial-scale 的值为前面计算的比例
  meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
})()

优点：

• 所量即所得避免复杂的计算，直接使用UI的标准像素值

缺点：

• 没有使用完美视口， 在一些设备上会出现问题

• 图片无法进行适配，可能会造成失真