デスクトップのリキッドをjsで対応する方法（windowサイズで可変する）

JavaScript

賢明な方法ではないのですが、cssでbodyをトランスフォームします。

1.bodyにid="body"を記述

2.cssでどの画面幅でも表示させたいwidthを設定、height、transform を設定

css

@media screen and (min-width: 768px) and (max-width: 1280px){
  html{
    margin-top: 0!important;
  }
  body {
      width: 1300px; 
      height: auto;　
      transform-origin: 0 0;
      margin: 0;
  }
}

3.js(windowを読み込むため閉じbodyタグの前に記述）

<script>
  var change_scale = {
    "width": 1300,
    "height": 6518,
    "percent": 1,
    "function": function() {
      "use strict";
      if (change_scale.percent === window.devicePixelRatio) {
        let window_width = document.documentElement.clientWidth;

        let element = document.getElementById('body');

        if (window_width >= 768 && window_width <= 1250) {

          let scale_value = window_width / change_scale.width;
          let scale = "scale(" + scale_value + ")";

          let height = change_scale.height * scale_value;
          height = height + 'px';

          element.style.transform = scale;
          element.style.height = height;
        }
      }
    }
  };
  (function() {
    "use strict";
    if (!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)) {
      if (window.devicePixelRatio !== 1) {
        alert("申し訳ございません。スタイルが崩れている可能性があります。恐れ入りますが、倍率を100%に変更後、リロードしてください。")
      }
    }
    change_scale.function();
  }());
  window.addEventListener("resize", function(event) {
    "use strict";
    change_scale.function();
  });
</script>

参考のサイトは下記です！感謝します！！！

ウィンドウサイズに応じて倍率を自動調整する.js - Qiita