how to get browser window size in javascript?

Question

I need to get browser window size , and set the window size to the div size in javascript.

i have 2 div elements if window size is 568px means, the div1 wants to 38% and div2 is 62%. In every size the both div wants to maintain the same percentage size.

Ionut Necula · Accepted Answer · 2016-12-01T07:41:53.847

13

You can use this:

var width = window.innerWidth;
var height = window.innerHeight;

UPDATE:

To set the width of the two div elements when screen is equal or smaller than 568px you can do:

if(width <= 568) { document.getElementById('div_1').style.width = '38%'; document.getElementById('div_2').style.width = '62%'; }

Or using a CSS only based solution which I think is recommended and more simpler in this case, by taking advantage of media queries:

.container{
  width: 100%;
}
.div_element {
  height: 100px;
  width: 100%;
}
#div_1 {
  width: 38%;
  background: #adadad;
}
#div_2 {
  width: 62%;
  background: #F00;
}
@media(max-width: 568px) {
  #div_1 {
    width: 38%;
  }
  #div_2 {
    width: 62%;
  }
  .div_element {
    float: left;
  }
}

<div class='container'>
  <div id='div_1' class='div_element'>
    div 1
  </div>
  <div id='div_2' class='div_element'>
    div 2
  </div>
</div>

edited Dec 01 '16 at 07:41

answered Dec 01 '16 at 07:20

Ionut Necula

11,107
4
45
69

How to set div width in above percentages? – Sathishkumar Dec 01 '16 at 07:21
568px is a example width im mention, if size increases the both div size calculate the same percentage in main window size. – Sathishkumar Dec 01 '16 at 07:36
Then check my second solution please and tell me if you need more help. – Ionut Necula Dec 01 '16 at 07:38
var width = window.innerWidth; c=(width/100)*38; alert(c); – Sathishkumar Dec 01 '16 at 07:42
what you think about above code line? its calculate the percentage in script only, its right or wrong? im asking like this only. i know the css method to create above, bt i need to create in script only. – Sathishkumar Dec 01 '16 at 07:43
That's not the right solution that you mentioned. – Ionut Necula Dec 01 '16 at 07:44
Ok thanks for the help. i get idea.. – Sathishkumar Dec 01 '16 at 08:02
I think that Javascript and Css solutions aren't the same. The media query is a viewport measure ,window.innerWidth isn't (it's a browser viewport measure). For mobile browser where there are concepts as ideal and default viewport the difference should be meanful. – Nick May 16 '20 at 13:21

score 3 · Answer 2 · answered Dec 01 '16 at 07:24

Use the following code to get browser window's height and width:

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

score 0 · Answer 3 · answered Dec 01 '16 at 07:28

Why do you need JS to do this when CSS itself can do so? This piece of code will maintain the div sizes on every screen size

body {
  margin: 0px;
  height: 100vh;
}
#div1 {
  width: 38%;
  height: 100%;
  float: left;
  background: red;
}
#div2 {
  width: 62%;
  height: 100%;
  float: left;
  background: yellow;
}
#divMain {
  clear: both;
  height:100%;
}
#divMain:after,
#divMain:before {
  display: table;
  content: '';
}
#divMain:after {
  clear: both;
}

<div id="divMain">
  <div id="div1">
  </div>
  <div id="div2"></div>
</div>

how to get browser window size in javascript?

3 Answers3