How to Get Browser Width Using JavaScript Code

How to get browser width using JavaScript code?

Update for 2017

My original answer was written in 2009. While it still works, I'd like to update it for 2017. Browsers can still behave differently. I trust the jQuery team to do a great job at maintaining cross-browser consistency. However, it's not necessary to include the entire library. In the jQuery source, the relevant portion is found on line 37 of dimensions.js. Here it is extracted and modified to work standalone:

function getWidth() {  return Math.max(    document.body.scrollWidth,    document.documentElement.scrollWidth,    document.body.offsetWidth,    document.documentElement.offsetWidth,    document.documentElement.clientWidth  );}
function getHeight() {  return Math.max(    document.body.scrollHeight,    document.documentElement.scrollHeight,    document.body.offsetHeight,    document.documentElement.offsetHeight,    document.documentElement.clientHeight  );}
console.log('Width:  ' +  getWidth() );console.log('Height: ' + getHeight() );

Get the size of the screen, current web page and browser window

You can get the size of the window or document with jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

For screen size you can use the screen object:

window.screen.height;
window.screen.width;

How to get the browser viewport dimensions?

Cross-browser `@media (width)` and `@media (height)` values

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

`window.innerWidth` and `window.innerHeight`

gets CSS viewport @media (width) and @media (height) which include scrollbars
initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
zoom may cause values to be 1px off due to native rounding
undefined in IE8-

`document.documentElement.clientWidth` and `.clientHeight`

equals CSS viewport width minus scrollbar width
matches @media (width) and @media (height) when there is no scrollbar
same as jQuery(window).width() which jQuery calls the browser viewport
available cross-browser
inaccurate if doctype is missing

Resources

Live outputs for various dimensions
verge uses cross-browser viewport techniques
actual uses matchMedia to obtain precise dimensions in any unit

How to get browser width (not document/window)?

This?

console.log(window.outerWidth);

Determining the browser width with standalone code

document.documentElement.clientWidth and window.innerWidth should work across all browsers (you can test here https://ryanve.com/lab/dimensions/). Opera 12 is 8 years old and not available for testing on https://browserstack.com so I wasn’t able to test.

FYI, if you care about the scrollbar width, check out these posts:

How to get screen width without (minus) scrollbar?
Get the height and width of the browser viewport without scrollbars using jquery?

how to get browser window size in javascript?

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>

Browser size (width and height)

// first get the size from the window
// if that didn't work, get it from the body
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}

How can I dynamically get browser height and width?

Try this code snippet

(function() {  window.onresize = displayWindowSize;  window.onload = displayWindowSize;
  function displayWindowSize() {    let myWidth = window.innerWidth;    let myHeight = window.innerHeight;    // your size calculation code here    document.getElementById("screen").innerHTML = myWidth + "x" + myHeight;  };

})();

<div id="screen"></div>

Get constant browser height and width

Use a window.onresize function as well as a window.onload handler to update the width and height variables.

(Resizeable Demo)

var width,height;window.onresize = window.onload = function() {    width = this.innerWidth;    height = this.innerHeight;    document.body.innerHTML = width + 'x' + height; // For demo purposes}

How to Get Browser Width Using JavaScript Code