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 · 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

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

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 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

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

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   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   x000D   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  amp  amp  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  amp  amp  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 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

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

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css