vue2项目PC端自适应屏幕

    公司项目做之前没有沟通好，按照1920*1080设计图做的页面，缩放比是100%，项目做完之后说要适配缩放比，并且工控屏（分辨率1024*768），需要做小屏适应。

    开发中一般pc端都是不用怎么考虑去适配屏幕的，因为现在的屏幕分辨率都是1960*1080，所以正常的前端页面都是可以适配的。

    项目技术栈：vue2+elementUI

一 . 需求

分辨率：

    pc：1920*1080

    工位机：1024*768

二 . 解决方案

1.使用scale-box 组件

    主要针对大屏可视化，适用于个别大屏适配，不能全局适配，但是侧边会留白居中

**2.使用JS 设置 zoom 属性调整缩放比例 **（调试可用）

    可以全局设置 但是会出现缩放比例失调 部分ui布局也会改变

    使用属性zoom，会导致一些问题比如使用了element的一些组件，下拉选项，下拉会出现偏移的现象

3.使用postcss-px2rem以及postcss-px-to-viewport

    通过px转rem以及vw的方案 虽然能全局使用 这些插件对行内样式不起效果 总的来说，不太适合已经成型的项目,还是会导致样式丢失

三 . 方案选择

    考虑已经成型的项目，无法逐一进行适配，所以针对那些px转rem以及vw的方案不能使用，代码调整处过多，故只能对页面进行一个强行缩放，去保证小屏下的布局样式不会乱同时功能也正常。

    以上三种都试过了，由于针对我的项目情况，我选的是第二种进行设置 zoom 属性调整缩放比例，最为稳妥。其他的我不在逐一述说，接下来主说我选的合适方案。

四 . 方案处理

    **1.在src同级目录下utils文件中创建monitorZoom.js 内容如下**

export const monitorZoom = () => {
    let ratio = 0,
      screen = window.screen,
      ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
    } else if (~ua.indexOf("msie")) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
    } else if (
      window.outerWidth !== undefined &&
      window.innerWidth !== undefined
    ) {
      ratio = window.outerWidth / window.innerWidth;
    }
    if (ratio) {
      ratio = Math.round(ratio * 100);
    }
    return ratio;
  };

    **2.在入口文件main.js中**

import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
if (window.screen.width * window.devicePixelRatio >= 3840) {
  document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
} else {
  document.body.style.zoom = 100 / Number(m);
}

    **3.通过路由前置守卫 控制某一个路由页面合适的缩放**

import { monitorZoom } from "@/utils/monitorZoom.js";
const m = monitorZoom();
router.beforeEach((to, from, next) => {
  console.log("即将跳转到的路由 ------------------------ >  " + to.name);
  /* 调整缩放比例 start */
  //针对工控屏调整的缩放比
  if (to.name === 'home' && window.screen.width <= 1024) {
    document.body.style.zoom = 60 / Number(m);//60是对着屏幕具体调的，因屏而异
  }else {
    document.body.style.zoom = 100 / Number(m);
  }
  /* 调整缩放比例 end */

    工控端界面的话合适比例为document.body.style.zoom = 60 / Number(m);

    同时需要解决刷新缩放丢失问题，刷新的时候重新计算缩放比