移动端适配

1、根据dpr设置viewport

根据js动态设置viewport的缩放比，从而达到设备独立像素等于物理像素

const scale = 1/window.devicePixelRatio
const viewport = document.querySelector('meta[name="viewport"]')
if (!viewport) {
  viewport = document.createElement('meta')
  viewport.setAttribute('name', 'viewport')
  window.document.head.appendChild(viewport)
}
viewport.setAttribute('content', `width=device-width,initial-scale=${scale },minmun-scale=${scale },maxmum-scale=${scale },user-scalable=no`)

2、rem适配

rem是相对于根元素来做计算的

(function (doc, win) {
  var docEl = doc.documentElement,
      dpr = window.devicePixelRatio || 1,
      resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
      recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if(clientWidth>=750){
              docEl.style.fontSize = '100px';
          }else{
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          }
      };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  recalc();
})(document, window);

3、vw和vh适配

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
如果视觉视口为375px, 1vw = 3.75px
这个换算关系有点复杂，在vue项目中，可以使用postcss插件辅助计算，书写css时按照设计稿尺寸正常书写即可

4.横屏检测

4.1 js检测

window.addEventListener('resize', ()=> {
  if (window.orientation === 180 || window.origntation ===0) {
    console.log('竖屏')
  }
  if (window.orientation === 90 || window.origntation ===-90 {
    console.log('横屏')
  }
})

4.2 css检测

@media screen and (origentataion: portrait) {
  // 竖屏
}

@media screen and (origentation: landscape) {
  // 横屏
}

5. 图片模糊问题

根据dpr不同，显示不同的位图

@media screen and (-webkit-min-decive-pixel-ratio: 2) {
  //显示@2x位图
}
@media screen and (-webkit-min-decive-pixel-ratio: 3) {
  //显示@3x位图
}