How to get browser width using JavaScript code

Question

I am trying to write a JavaScript function to get the current browser width   I found this one   javascript alert document body offsetWidth     But its problem that it fail if the body has width 100    Is there any other better function or a workaround

User · Accepted Answer

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:

_x000D_

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

_x000D_

Original Answer

Since all browsers behave differently, you'll need to test for values first, and then use the correct one. Here's a function that does this for you:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

and similarly for height:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

Call both of these in your scripts using getWidth() or getHeight(). If none of the browser's native properties are defined, it will return undefined.

User · Answer

An adapted solution to modern JS of Travis  answer   const getPageWidth        gt      const bodyMax   document body       Math max document body scrollWidth  document body offsetWidth        0     const docElementMax   document documentElement       Math max          document documentElement scrollWidth          document documentElement offsetWidth          document documentElement clientWidth               0     return Math max bodyMax  docElementMax

User · Answer

From W3schools and its cross browser back to the dark ages of IE    lt  DOCTYPE html gt   lt html gt   lt body gt    lt p id  demo  gt  lt  p gt    lt script gt  var w   window innerWidth    document documentElement clientWidth    document body clientWidth   var h   window innerHeight    document documentElement clientHeight    document body clientHeight   var x   document getElementById  demo    x innerHTML    Browser inner window width      w      height      h         alert  Browser inner window width      w      height      h           lt  script gt    lt  body gt   lt  html gt

User · Answer

It s a pain in the ass   I recommend skipping the nonsense and using jQuery  which lets you just do   window  width

User · Answer

var w   window innerWidth  var h   window innerHeight  var ow   window outerWidth    including toolbars and status bar etc  var oh   window outerHeight    Both return integers and don t require jQuery  Cross-browser compatible   I often find jQuery returns invalid values for width   and height

User · Answer

Here is a shorter version of the function presented above   function getWidth         if  self innerWidth           return self innerWidth            else if  document documentElement  amp  amp  document documentElement clientHeight           return document documentElement clientWidth            else if  document body            return document body clientWidth            return 0

User · Answer

An important addition to Travis  answer  you need to put the getWidth   up in your document body to make sure that the scrollbar width is counted  else scrollbar width of the browser subtracted from getWidth    What i did     lt body gt   lt script gt  function getWidth    return Math max document body scrollWidth  document documentElement scrollWidth  document body offsetWidth  document documentElement offsetWidth  document documentElement clientWidth     var aWidth getWidth     lt  script gt   lt  body gt    and call aWidth variable anywhere afterwards

User · Answer

Why nobody mentions matchMedia   if  window matchMedia   min-width  400px    matches         the viewport is at least 400 pixels wide      else        the viewport is less than 400 pixels wide        Did not test that much  but tested with android default and android chrome browsers  desktop chrome  so far it looks like it works well    Of course it does not return number value  but returns boolean - if matches or not  so might not exactly fit the question but that s what we want anyway and probably the author of question wants

[javascript] How to get browser width using JavaScript code?

Update for 2017

Original Answer

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css