VUE 移动端适配（viewport）

1. 新建一个sclaer.js

export default () => {
  let base = 750
  let width = 1
  let scale = 1

  const viewport = document.head.querySelector('meta[name="viewport"]')

  function setScale() {
    // 设置viewport，必须先重置再设置，否则不会生效的
    viewport.setAttribute('content', "width=device-width,initial-scale=1.0")

    setTimeout(() => {
      width = document.documentElement.clientWidth
      scale = width > base ? 1 : width / base
      // 重新设置viewport
      viewport.setAttribute('content', `width=${base},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no,minimal-ui`)
    }, 120)
  }


  // 事件监听    
  window.addEventListener('load', setScale, false)
  window.addEventListener('orientationchange', setScale, false)
}

2.在mian.js中直接引入

 // 自动缩放
import Scaler from './Scaler'
Scaler()