Scale the entire body when resizing the window

Question

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

I have tried using:

<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

And

<script type="text/javascript">
  $(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 + ")"
      });
    }
  });

And also with CSS

body {
width:100vw;
height:100vh;
}

The website is here:

kotechweb.com/new_focus/page/about_us

The problem is, right now the content is overlapped when resized.

Answer 1

The view port:<meta name="viewport" content="width=device-width, initial-scale=1">. This will make the browser render the width of the page at the width of its own screen. This article gives more information for the viewport meta tags: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
works only when the window is loaded not re-sized

calculateNewScale() function just tries to resize the body Your font size are set in px - change them to % or rem

I know you dont want the site responsive but setting CSS media queries can help with what you want.