Content fit the screen after certain re-size

Question

Under 1024 of width I'd like body of the page to fit the screen of a user without a scrollbar. Basically, I want to scale whole body so that it fits screen browser(without scrollbar) under 1024 width. I tried something like this:

function resizeWindow() {
   $(window).off('scroll');

   windowWidth = $(window).width();
   console.log(windowWidth);
     if (windowWidth > 1024) 
     {
         console.log(">1024");
     }else if (windowWidth <= 1024) 
     {
       $('body').css('height', '100vh');
       $('body').css('width', '100vw')
     }
}

$(window).resize(resizeWindow);

CSS:

body, html {
 height: 100%;
 width: 100%;
}

Setting the viewport meta usually is enough check https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag — apokryfos, Sep 06 '17 at 13:29
Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — lumio, Sep 06 '17 at 13:38
Also you "can't" really change the `body, html`'s width. Add a wrapper element inside your `body`. — lumio, Sep 06 '17 at 13:40

score 0 · Answer 1 · answered Sep 06 '17 at 13:35

0

Use @media query.

@media screen and (max-width: 1024px) {
  body, html {
    height: 100vh;
    width: 100vw;
  }
}

answered Sep 06 '17 at 13:35

Julio Feferman

2,658
3
15
26

Content fit the screen after certain re-size

1 Answers1