前端适配笔记本缩放125%，150%导致页面错乱问题

问题描述：由于前端在开发时使用的都是标准【ui设计】图，基本都是按照所以1920*1080， 而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大125%或者150%。这样的情况下页面打开就会导致变形。因此给出以下解决方案。

export default {
  name: 'App',
  created () {
    const devicePixelRatio = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25    150% -> 1.5
    if (devicePixelRatio !== 1) {
      // 老ie可以提示
      if (!! window.ActiveXObject || 'ActiveXObject' in window) {
        alert('balabala,去用chrome吧')
      } else {
        const c = document.querySelector('body')
        c.style.zoom = 1 / devicePixelRatio// 修改页面的缩放比例
      }
    }
  }
}

补充说明：这里是屏幕任意缩放，不能是浏览器任意缩放，浏览器缩放会导致所有内容同时变大或变小， 但是浏览器和屏幕是可以互相中和的，举个例子，笔记本屏幕方法150%，那么浏览器一定是缩放2/3时可以显示原始的页面，因为他们共同影响页面元素的。