vue页面根据电脑屏幕分辨率放大缩小

根据电脑的屏幕分辨率的大小，将页面进行缩放
在public的index.html里写上此段代码即可

  <script>
    // 获取屏幕的宽度和高度
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;

    // 根据屏幕分辨率进行视窗放大和缩小
    function adjustViewport() {
      if (screenWidth > 1920) {
        // 如果屏幕宽度大于等于1920像素，放大视窗
        document.body.style.zoom = 1.15;
        document.body.style.height = '100%';

        // 处理缩放导致canvas定位异常
        document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / 1.15 + '}');
        document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + 1.15 + ')}');
        document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}');
      } else {
        // 否则，恢复默认视窗大小
        document.body.style.zoom = 1;
      }
    }

    // 在页面加载完成后调用函数
    window.onload = function () {
      adjustViewport();
    };
  script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27