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.

you can try viewport units: http://caniuse.com/#feat=viewport-units — Khanh TO, Sep 27 '15 at 02:03
Please note, the MySQL logo is not in the public domain. Using it as an avatar might be violating some copyright (http://www.mysql.com/about/legal/trademark.html). But IANAL. — RandomSeed, Oct 22 '15 at 08:03

score 12 · Accepted Answer · answered Oct 10 '15 at 03:31

12

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

answered Oct 10 '15 at 03:31

Victor Luna

1,746
2
17
36

Thank you... I was struggling with resize issue after migrating from angular to traditional HTML. Your answer solved my issue. – Saad Zahoor May 19 '22 at 09:09

score 4 · Answer 2 · answered Oct 15 '15 at 15:39

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.

score 3 · Answer 3 · answered Oct 15 '15 at 07:09

you can use for make response

1.width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). 2.initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. e.g. meta name="viewport" content="width=device-width, initial-scale=1.0"

some additional rules: 1. Do NOT use large fixed width elements 2. Do NOT let the content rely on a particular viewport width to render well 3. Use CSS media queries to apply different styling for small and large screens

also you can use media property and apply screen wise css.

score 2 · Answer 4 · edited Oct 15 '15 at 17:36

2

Your viewport tag is wrong, should be <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

But maybe <meta name="viewport" content="user-scalable=no" /> will work.

edited Oct 15 '15 at 17:36

Tamir Vered

10,187
5
45
57

answered Oct 09 '15 at 07:59

andreasbecker.de

533
2
12

score 2 · Answer 5 · answered Oct 10 '15 at 04:27

There are few things you can do: 1. change your HTML layout. Put image, content and footer within a container or wrapper like

<html>
  <head></head>
  <body>
    <div id="wrapper">
      //everything goess inside here
    </div>
  </body>
</html>

use rem/em instead of px. You haven't used rem/em/vw consistently. Meaning, for left-margin you have used 50px. And there will be time when it will cause word shift.
your tag includes bootstrap. If you are using bootstrap....then you are better off using BootStrap Grid. I would first build a page for mobile viewing and then I will use same layout for bigger screen.

good luck.

score 2 · Answer 6 · answered Oct 14 '15 at 22:17

2

If you are using bootstrap, you could simply change your container class to class = "container-fluid"

answered Oct 14 '15 at 22:17

Mark

1,812
3
29
51

score 1 · Answer 7 · edited May 23 '17 at 12:01

Using pure transform: scale(x), you are going to run into a lot of margin, centering, and positioning issues, unless you compensate with some javascript logic.

Some CSS things you can do:

1) You can make the main background scale based on browser width by applying

body { 
  background-size: cover;
  background-repeat: no-repeat;
}

2) You can make all measurement units based on vw units similar to this:

Font scaling based on width of container

for instance, if you want your fonts to scale proportionate to your width, you can set

body {
  font-size: 0.835vw; //around 14px at 1920px
}

Another example is if you want a container that is 300px high at 1920px width to scale based on width, you can make that container

.container {
  height: 150vw; //around 300px at 1920px
}

Presumably you are not trying to keep the footer at the bottom at all sizes? Otherwise you can just use position:fixed; on the footer.

Also, if you keep a fixed aspect ratio, you are going to have very funny spacing if the browser height is taller than the width. Are you sure this is what you want?

Keep in mind, this is a very odd way to resize content which could result in performance and readibility issues (which you are aware). Most people would recommend just using a meta tag for devices, or making your elements responsive.

Scale the entire body when resizing the window

7 Answers7