Script for detecting the screen size,and change css according to screen size

Question

I got this script for detecting the size of the window -

function myFunction()
{
    var w = window.innerWidth;
    var h = window.innerHeight;

    if (w = 768) {
        document.getElementById("container").style.height = "15.155em";
    } else if (w = 1024) {
        document.getElementById("container").style.height = "25.155em";
    } else if (w = 1366) {
        document.getElementById("container").style.height = "35.155em";
    }
}

<body onload="myFunction()">
  <div id="container" style="width:50px;border:2px solid black;">
  </div>
</body>

What i would like to happen,is each time the height of the div would change,according to the size of window.

Whats happening now,is on every screen i run the website its showing me as if the screen size is the "768"

Why not use height:100% ? You need then of course set the body to height: 100% to make this work. You can also use the @media rule: w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1 — Jankapunkt
– Jankapunkt, Commented Mar 16, 2016 at 6:50
the @media ruleset is especially for creating responsive layouts — Jankapunkt
– Jankapunkt, Commented Mar 16, 2016 at 6:53
Jankapunkt can you give a link to some website with most usefull @media rules ? Ive checked a bunch,and nothing — Mike
– Mike, Commented Mar 16, 2016 at 6:54

Tormod Haugene · Accepted Answer · 2016-03-16 07:01:35Z

1

You don't need javascript for this: it can be done entirely with css. You have a few options (that I can think of right now):

Using the amazing flexbox classes (example)
Setting height to 100% on the element itself and all parents (try the snippet below)
Using the vh viewport units (1vh = 1% of viewport height)

Hope that helps!

html,
body {
  margin: 0;
  padding: 0;
  height: 100%
}
div {
  width: 100px;
  height: 100%;
  background: red;
}

<div></div>

answered Mar 16, 2016 at 7:01

Tormod Haugene

3,7352 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nukul Ghosh · Accepted Answer · 2016-03-16 06:57:04Z

0

You can use CSS instead of using JS. Use the following CSS to fit the DIV to whatever size of the screen is.

    #container
    {
    position: absolute;
    overflow-x: hidden;
    overflow-y:auto;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto; 
   }

Also you can use height:100vh but this Unit will not be support in older browser.

Thanks

answered Mar 16, 2016 at 6:57

Nukul Ghosh

811 silver badge3 bronze badges

1 Comment

Mike Over a year ago

Actully without the height given its not showing anything

Nirpendra Patel · Accepted Answer · 2016-03-16 07:05:17Z

0

because actual browser width is always lesser than screen resolution , and u are using screen resolution for comparison.

if (w = 768)
else if (w = 1024)
else if (w = 1366)

Either use

if(w<768)
//do something
else if(w<1024)
//do something
else if(w<1366)
//do something
else
//default

Or better use

screen.width
screen.height

if you want to use = as comparator.

answered Mar 16, 2016 at 7:05

Nirpendra Patel

6797 silver badges20 bronze badges

Comments

Raviteja Avvari · Accepted Answer · 2016-03-16 13:03:27Z

0

It is because in a if condition to evaluate there should be == and not =. What you have used is an assignment operator and not comparision.

Please correct the code as below

function myFunction()
{
    var w = window.innerWidth;
    var h = window.innerHeight;

    if (w == 768) {
        document.getElementById("container").style.height = "15.155em";
    } else if (w == 1024) {
        document.getElementById("container").style.height = "25.155em";
    } else if (w == 1366) {
        document.getElementById("container").style.height = "35.155em";
    }
}

As other members suggested mediaQueries is a good option in case you are looking to make it responsive.

answered Mar 16, 2016 at 13:03

Raviteja Avvari

2504 silver badges14 bronze badges

Comments

marc_s · Accepted Answer · 2016-04-11 12:40:47Z

0

You can use CSS media queries like here

@media only screen and (min-width: 600px)
{
    .container
    {
        height: 15.155em;
    }
}

@media only screen and (min-width: 768px)
{
    .container
    {
        height: 25.155em;
    }
}

edited Apr 11, 2016 at 12:40

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 16, 2016 at 7:16

Codeguru

459 bronze badges

Collectives™ on Stack Overflow

Script for detecting the screen size,and change css according to screen size

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related