2024年Web前端最新vue 项目的屏幕自适应方案_vue2-scale-box，2024年最新面试技巧考试

最新推荐文章于 2025-04-22 23:00:39 发布

2401_84619287

最新推荐文章于 2025-04-22 23:00:39 发布

阅读量971

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619287/article/details/138729925

版权

程序员专栏收录该内容

98 篇文章

订阅专栏

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

或者

yarn add vue3-scale-box

使用方法：

<template>
    <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">
        <router-view />
    </ScaleBox>
</template>

<script>
import ScaleBox from "vue3-scale-box";
</script>

<style lang="scss">
body {
    margin: 0;
    padding: 0;
    background: url("@/assets/bg.jpg");
}
</style>

方案二：设置设备像素比例（设备像素比）

在项目的 utils 下新建 devicePixelRatio.js 文件

class devicePixelRatio {
  /* 获取系统类型 */
  getSystem() {
    const agent = navigator.userAgent.toLowerCase();
    const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    if (isMac) return false;
    // 目前只针对 win 处理，其它系统暂无该情况，需要则继续在此添加即可
    if (agent.indexOf("windows") >= 0) return true;
  }
  /* 监听方法兼容写法 */
  addHandler(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  }
  /* 校正浏览器缩放比例 */
  correct() {
    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化
    document.getElementsByTagName("body")[0].style.zoom =
      1 / window.devicePixelRatio;
  }
  /* 监听页面缩放 */
  watch() {
    const that = this;
    // 注意: 这个方法是解决全局有两个window.resize
    that.addHandler(window, "resize", function () {
      that.correct(); // 重新校正浏览器缩放比例
    });
  }
  /* 初始化页面比例 */
  init() {
    const that = this;
    // 判断设备，只在 win 系统下校正浏览器缩放比例
    if (that.getSystem()) {
      that.correct(); // 校正浏览器缩放比例
      that.watch(); // 监听页面缩放
    }
  }
}
export default devicePixelRatio;

在 App.vue 中引入并使用即可

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
import devPixelRatio from "@/utils/devicePixelRatio.js";

export default {
  created() {
    new devPixelRatio().init(); // 初始化页面比例
  },
};
</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
}
</style>

方案三：通过 JS 设置 zoom 属性调整缩放比例

在项目的 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;
};

在 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);
}

完整代码

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

/* 调整缩放比例 start */
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);
}
/* 调整缩放比例 end */

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");