vue写移动端告别rem 用这个方法适配各种手机 1:1还原设计稿

这个有去掉弹框域名/适配移动端/禁止微信分享
分辨率是375 比如设计稿是375的，量多少px就写多少px就可以了。

在vue的main.js里引入文件config.js

import '../utils/conifg.js'

config.js

/*config.js*/


function resize () {
  let windowSize = {
    width: window.screen.width,
    height: document.documentElement.clientHeight,
    ratio: window.devicePixelRatio,
    scale: window.screen.width / 375
  }
  let str = 'width=375, initial-scale=' + windowSize.scale + ', maximum-scale=' + windowSize.scale + ', minimum-scale=' + windowSize.scale + ', user-scalable=no'
  document.getElementById('viewport') && document.getElementById('viewport').setAttribute('content', str)
}

/**
 * 适配手机端页面
 */
window.addEventListener('resize', resize())

/**
 * 弹窗提示去掉域名
 */

window.alert = function (name) {
  var iframe = document.createElement('IFRAME')
  iframe.style.display = 'none'
  iframe.setAttribute('src', 'data:text/plain,')
  document.documentElement.appendChild(iframe)
  window.frames[0].window.alert(name)
  iframe.parentNode.removeChild(iframe)
}

window.confirm = function (message) {
  var iframe = document.createElement('IFRAME')
  iframe.style.display = 'none'
  iframe.setAttribute('src', 'data:text/plain,')
  document.documentElement.appendChild(iframe)
  var alertFrame = window.frames[0]
  var result = alertFrame.window.confirm(message)
  iframe.parentNode.removeChild(iframe)
  return result
}

/**
 * 禁止微信分享
 */


function onBridgeReady () {
  window.WeixinJSBridge.call('hideOptionMenu')
}

if (typeof window.WeixinJSBridge === 'undefined') {
  if (document.addEventListener) {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
  } else if (document.attachEvent) {
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
  }
} else {
  onBridgeReady()
}

使用方法：

在public/index.html

<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0">