大屏适配方案

<script>
    // 1、初始化 或 窗口大小发生变化时，动态设置html根标签的高端适配
    $(function () {
      resizeWidth();

      // 监听页面缩放
      $(window).resize(function () {
        resizeWidth();
      });
    })

    // 通过css动态适配当前页面
    function resizeWidth() {
      // 2、根据当前屏幕高宽动态计算缩放的比例值（这里以1920 * 1080为适配方案，也可以基于其他尺寸）
      var ratio = $(window).width() / (1920);
      var ratioY = $(window).height() / 1080;

      // var jdh = ($(window).height() - (1080 * ratio)); // 这个代码未使用

      // 动态设置html元素等比缩放比例
      $('html').css({
        // 通过上面计算的缩放值，为html根标签使用css中scale等比缩放
        transform: "scale(" + ratio + "," + ratioY + ")",
        // 设置缩放、旋转等操作时的原点，这里设置的原点是左上角（默认是当前html元素中心点位置）
        transformOrigin: "left top",
        // 设置背景高宽都为百分之百
        backgroundSize: "100% 100%",
        // 设置高宽为1080 * 1920
        height: 1080 + "px",
        width: 1920 + "px"
      });
    }
  </script>