问题描述

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

下图:是在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效果

在这里插入图片描述
在小屏幕显示效果,带有滚动条,但是全屏显示,则无滚动条(但火狐浏览器小屏幕会有一部分空白区域)

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐