vue 利用CSS 的 transform属性 对 页面布局进行自适应缩放

问题描述

需求要求在不同的适配器上，都需要保证页面的整体布局无误，只能对页面的字体进行一定比例的缩放，才能实现这样的效果。

下图：是在1920*1080显示屏上呈现的正常效果

但是在小屏幕显示的错误效果

或者打开开发工具，显示的错误效果

解决方案

1. 动态计算整体布局的高度和宽度
   （1） 利用jQuery的 $(window).width() 获取对应的当前宽度（不包含 任务栏的宽度+菜单栏的宽度 + 滚动条的宽度）
   （2）同理 利用 $(window).height() 获取对应当前的高度 （不包含 任务栏的高度+菜单栏的高度 + 滚动条的高度）
   （3）当屏幕小于1920像素时，固定设置 宽度为1920px ，高度为 1080px

2. 动态根据 当前宽度 / 屏幕宽度 计算缩放比例值 $(window).width() / ($('body').width();

3. 给body标签，利用 css的transform进行缩放。

  $('body').css({
        transform: "scale(" + $(window).width() / ($('body').width()+ ")",
        transformOrigin: "left top",
        backgroundSize: "100%"
      });

其中 transformOrigin: 'left top' 保证整体内容 从左上角开始显示。默认是居中显示。
backgroundSize: "100%" 保证X轴，全铺满。

具体代码如下：

window.global = window;
  (function () {
    if ($(window).width() >= 1920) {
      $(window).width() && $('body').css('width', $(window).width());
      $(window).height() && $('body').css('height', $(window).height());
    } else {
      $(window).width() && $('body').css('width', "1920px");

      var ratio = $(window).width() / (1920 || $('body').width());
      $('body').css({
        transform: "scale(" + ratio + ")",
        transformOrigin: "left top",
        backgroundSize: "100%",
        height: "1080px"
      });
    }
    $('head').append('<meta name="viewport" content="width=' + $(window).width() + '"/>');

    //监听页面是否发生改变
    $(window, document).resize(function () {
      resize();
    })

    function resize() {
      if (window.screen.display == 2) { // 等比缩放高度铺满
        resizeCenter();
      } else if (window.screen.display == 3) { //全屏铺满
        resizeFull();
      } else if (window.screen.display == 4) { //等比缩放高度铺满并且可以左右移动
        resizeHeight();
      } else { // 等比缩放宽度铺满
        resizeWidth();
      }

    }
    function resizeWidth() {
      window.location.reload()
      if ($(window).width() >= 1920) {
        var ratio = $(window).width() / ($(window).width() || $('body').width());
        $(window).height() && $('body').css('height', $(window).height());
      } else {
        $('body').css('height', "1080px");
      }
      var ratio = $(window).width() / (1920 || $('body').width());
      $('body').css({
        transform: "scale(" + ratio + ")",
        transformOrigin: "left top",
        backgroundSize: "100%"
      });
    }
    function resizeCenter() {
      if (!window.screen.height || !window.screen.width) return resizeCenterBak();
      var ratio = $(window).height() / window.screen.height;

      $('body').css({
        transform: "scale(" + ratio + ")",
        transformOrigin: "left top",
        backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
        backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
        marginLeft: ($(window).width() - $('body').width() * ratio) / 2
      });
    }

    function resizeHeight() { //
      if (!window.screen.height || !window.screen.width) return resizeCenterBak();
      var ratio = $(window).height() / window.screen.height;

      $('body').css({
        transform: "scale(" + ratio + ")",
        transformOrigin: "left top",
        backgroundSize: 100 * (window.screen.width / $(window).width() * ratio) + "%" + ' 100%',
        backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
        // marginLeft: ($(window).width() - $('body').width() * ratio) / 2
      });
      $('html').css({
        overflowX: 'scroll',
      })
    }

    function resizeFull() {
      if (!window.screen.height || !window.screen.width) return resizeFullBak();
      var ratioX = $(window).width() / window.screen.width;
      var ratioY = $(window).height() / window.screen.height;

      $('body').css({
        transform: "scale(" + ratioX + ", " + ratioY + ")",
        transformOrigin: "left top",
        backgroundSize: "100% 100%",
      });
    }

    function resizeCenterBak() {
      var ratioX = $(window).width() / $('body').width();
      var ratioY = $(window).height() / $('body').height();
      var ratio = Math.min(ratioX, ratioY);

      $('body').css({
        transform: "scale(" + ratio + ")",
        transformOrigin: "left top",
        backgroundSize: (1 / ratioX) * 100 * ratio + "%",
        backgroundPosition: ($(window).width() - $('body').width() * ratio) / 2 + "px top",
        marginLeft: ($(window).width() - $('body').width() * ratio) / 2
      });
    }
    function resizeFullBak() {
      var ratioX = $(window).width() / $('body').width();
      var ratioY = $(window).height() / $('body').height();

      $('body').css({
        transform: "scale(" + ratioX + ", " + ratioY + ")",
        transformOrigin: "left top",
        backgroundSize: "100% " + ratioY * 100 + "%",
      });
    }
  })();

最终呈现效果
小屏幕全屏效果

打开F12效果

在小屏幕显示效果，带有滚动条，但是全屏显示，则无滚动条（但火狐浏览器小屏幕会有一部分空白区域）