CODEWITHSUNDEEP
htmlcsstwitter-bootstraplayout
user782104
user782104

Reputation: 13555

Scale the entire body when resizing the window

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.

Upvotes: 21

Views: 29484

Answers (7)

Vincent Chan
Vincent Chan

Reputation: 482

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.

Upvotes: 1

andreasbecker.de
andreasbecker.de

Reputation: 518

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.

Upvotes: 2

Lucky Chingi
Lucky Chingi

Reputation: 2258

<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.

Upvotes: 4

Vyankatesh Shirde
Vyankatesh Shirde

Reputation: 43

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.

Upvotes: 3

Mark
Mark

Reputation: 1872

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

Upvotes: 2

sagarthapa
sagarthapa

Reputation: 176

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>

  1. 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.

  2. 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.

Upvotes: 2

Victor Luna
Victor Luna

Reputation: 1814

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

Upvotes: 12

Related Questions