屏幕适配方案实现

在现代 Web 开发中，确保页面在不同分辨率设备上正常显示是一项关键需求。以下是几种常见的 Vue 项目屏幕自适应处理方式。

方案一：使用缩放容器组件

通过第三方组件库实现整体页面缩放，保持设计稿比例不变。

npm install responsive-scale-container

<template>
  <ScaleWrapper :baseWidth="1920" :baseHeight="1080" backgroundColor="#f0f0f0">
    <router-view />
  </ScaleWrapper>
</template>

<script>
import ScaleWrapper from "responsive-scale-container";

export default {
  components: {
    ScaleWrapper
  }
};
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  background-image: url("@/images/background.jpg");
  background-size: cover;
}
</style>

方案二：动态调整设备像素比

创建工具类监听并修正浏览器缩放行为，适用于 Windows 平台特殊处理。

// utils/pixelRatioManager.js
class PixelRatioManager {
  detectOS() {
    const userAgent = navigator.userAgent.toLowerCase();
    const isWindows = userAgent.includes('windows');
    return isWindows ? 'windows' : 'other';
  }

  bindEvent(target, event, callback) {
    if (target.addEventListener) {
      target.addEventListener(event, callback);
    } else {
      target[`on${event}`] = callback;
    }
  }

  adjustZoomLevel() {
    const bodyElement = document.body;
    const currentRatio = window.devicePixelRatio || 1;
    bodyElement.style.zoom = 1 / currentRatio;
  }

  setupListener() {
    this.bindEvent(window, 'resize', () => {
      this.adjustZoomLevel();
    });
  }

  initialize() {
    if (this.detectOS() === 'windows') {
      this.adjustZoomLevel();
      this.setupListener();
    }
  }
}

export default PixelRatioManager;

<script>
import PixelRatioManager from '@/utils/pixelRatioManager';

export default {
  name: 'App',
  mounted() {
    const manager = new PixelRatioManager();
    manager.initialize();
  }
};
</script>

方案三：基于 zoom 属性的手动控制

通过 JavaScript 计算当前缩放值，并手动设置 body 的 zoom 属性。

// utils/screenScaler.js
export function calculateScreenScale() {
  let scaleValue = 1;
  const userAgent = navigator.userAgent.toLowerCase();

  if (window.devicePixelRatio) {
    scaleValue = window.devicePixelRatio;
  } else if (userAgent.includes('trident')) {
    // IE 浏览器兼容性处理
    const screen = window.screen;
    if (screen.deviceXDPI && screen.logicalXDPI) {
      scaleValue = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (window.outerWidth && window.innerWidth) {
    scaleValue = window.outerWidth / window.innerWidth;
  }

  return Math.round(scaleValue * 100);
}

// main.js
import { calculateScreenScale } from './utils/screenScaler';

const scaleFactor = calculateScreenScale();
const isHighResolution = window.screen.width * window.devicePixelRatio >= 3840;

document.body.style.zoom = isHighResolution 
  ? 100 / (scaleFactor / 2) 
  : 100 / scaleFactor;

获取屏幕信息

可以通过以下 API 获取屏幕相关信息：

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
const deviceRatio = window.devicePixelRatio;