部分代码

<!DOCTYPE html>
<html style="overflow-x: hidden; overflow-y: visible">
<head> 
  <title>datav阿里大屏适配</title>
</head>
<body>
 
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    (function () {
    
      window.screen.width && $('body').css('width', window.screen.width);
      window.screen.height && $('body').css('height', window.screen.height);
      $('head').append('<meta name="viewport" content="width=' + window.screen.width + '"/>');

      const onload = () => {
          resize();
      };
      $(window, document).resize(function () {
        resize();
      }).load(onload);
      setTimeout(onload, 10 * 1000);

      function resize() {
        // 等比缩放宽度铺满
          resizeWidth();
      }
 
      function resizeWidth() {
        var ratio = $(window).width() / (window.screen.width || $('body').width());

        $('body').css({
          transform: "scale(" + ratio + ")",
          transformOrigin: "left top",
          backgroundSize: "100%"
        });
      }
    })();
  </script>
</body>

</html>

全部代码可选择适配

<!DOCTYPE html>
<html style="overflow-x: hidden; overflow-y: visible">

<head> 
  <title>datav阿里大屏适配</title>
</head>
<body>
  <style>
    html,body{
      margin: 0;
      padding: 0;
    }
    #datav-loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #0f2a42;
      z-index: 2;

    }

    #datav-loading img.datav-logo {
      width: 120px;
    }

    #datav-loading img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #datav-loading img.text-logo {
      margin-top: 73px;
      width: 100px;
    }

    #datav-loading img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>

  <div id="datav-loading" style="background: #0f2a42;">
    <a target="_blank" href="javascript:;">

      <img class="datav-logo" src="//img.alicdn.com/tfs/TB1RzYryY9YBuNjy0FgXXcxcXXa-300-300.gif">
      <img class="text-logo" src="//img.alicdn.com/tfs/TB1EBjryY9YBuNjy0FgXXcxcXXa-500-129.png" width="100/">

    </a>
  </div>


  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
    (function () {
      // display 可修改适配方案 默认等比缩放宽度铺满
      window.screen.display = 1
      window.screen.width && $('body').css('width', window.screen.width);
      window.screen.height && $('body').css('height', window.screen.height);
      $('head').append('<meta name="viewport" content="width=' + window.screen.width + '"/>');


      const onload = () => {
        $('#datav-loading').fadeOut(400, () => {
          $('.datav-layout').css('visibility', 'visible');
          resize();
        });
      };
      $(window, document).resize(function () {
        resize();
      }).load(onload);
      setTimeout(onload, 10 * 1000);


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

      }

      function resizeNone() {

        $('body').css({
          overflow: "hidden",
          position: 'relative'
        });
      }

      function resizeWidth() {
        var ratio = $(window).width() / (window.screen.width || $('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 + "%",
        });
      }

    })();
  </script>
</body>

</html>

datav大屏适配

部分代码

全部代码可选择适配