title: Scale the entire body when resizing the window
body: <p>I would like to create a website that is not responsive, but if the windows are resized, everything is scale up / down, and keep the same ratio. It doesn't matter if the words are too small in small screen, the first priority is to prevent the element overlap when resize</p>
  
  <p>I have tried using:</p>
  
  <pre><code>&lt;meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
  
      $(window).resize(function () {
        calculateNewScale();
      });
  
      calculateNewScale(); // if the user go to the page and his window is less than 1920px
  
      function calculateNewScale() {
        var percentageOn1 = $(window).width() / 1920);
        $("body").css({
          "-moz-transform": "scale(" + percentageOn1 + ")",
          "-webkit-transform": "scale(" + percentageOn1 + ")",
          "transform": "scale(" + percentageOn1 + ")"
        });
      }
    });
  </code></pre>
  
  <p>And also with CSS</p>
  
  <pre><code>body {
  width:100vw;
  height:100vh;
  }
  </code></pre>
  
  <p>The website is here:</p>
  
  <pre><code>kotechweb.com/new_focus/page/about_us
  </code></pre>
  
  <p>The problem is, right now the content is overlapped when resized.</p>