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:

console.log(document.body.offsetWidth);

But its problem that it fail if the body has width 100%.

Is there any other better function or a workaround?

chaos · Accepted Answer · 2013-05-16 21:02:15Z

310

It's a pain in the ass. I recommend skipping the nonsense and using jQuery, which lets you just do $(window).width().

edited May 16, 2013 at 21:02

answered Jun 24, 2009 at 14:32

chaos

123k33 gold badges304 silver badges310 bronze badges

2

If I recalled correctly, jQuery has pulled much of dimensions into the core. Do you still need dimensions to do what you're suggesting?
– Nosredna
Commented Jun 24, 2009 at 14:41
6

The $(window).width() support in jQuery is since version 1.2, in case it's relevant to anybody.
– chaos
Commented Jun 24, 2009 at 14:44
20

I've found that $(window).width() does not always return the same value as innerWidth / clientWidth as per the examples in the answer below. jQuery's version doesn't take browser scrollbars into account (in FF anyway). This caused me a lot of confusion with CSS @media queries appearing to trigger at the wrong width. Using native code seems to be more reliable as it takes the appearance of the scrollbars into account.
– Coder
Commented Jan 19, 2013 at 10:17
13

Adding 30k lines of code to get window width is a BAD solution!
– codechimp
Commented Feb 7, 2018 at 16:34
2

@codechimp "Adding 30k lines of code to get window width is a BAD solution!" Proceeds to add a 80k file just to get window width. Bad is relative.
– Madness
Commented Feb 8, 2018 at 21:45

| Show 2 more comments

Travis · Accepted Answer · 2017-07-31 20:40:56Z

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() );

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.

Best answer because I dont have to include a 33k library for a simple redirect based on browser window width — David Aguirre, Commented Jun 21, 2014 at 17:21
This produces the right (or expected) results consistently compared to jQuery's implementation. — Emmanuel John, Commented Aug 17, 2014 at 5:04
... each of these three shows some result and all results (widths) are different. For example with Google Chrome see self.innerWidth 423, document.documentElement.clientWidth 326 and document.body.clientWidth 406. In such case question: which is correct and which to use? For example i want to resize google map. 326 or 423 big difference. If width ~ 700, then see 759, 735, 742 (not so big difference) — Andris, Commented Mar 13, 2015 at 4:00
@user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0); and var windowWidth = self.innerWidth || -1; // because of "body" or "screen" or "document" are not the "window" if you check an overflowed content of html you can understand. # i.sstatic.net/6xPdH.png — Abdullah, Commented Apr 3, 2016 at 11:32
@Travis is this still true in 2017? Or is window.innerWidth enough today? — pyronaur, Commented Jul 25, 2017 at 16:49

Bradley Flood · Accepted Answer · 2014-02-13 00:52:33Z

65

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

answered Feb 13, 2014 at 0:52

Bradley Flood

10.5k3 gold badges47 silver badges43 bronze badges

1

Having trouble using this on Safari iphone.
– nu everest
Commented Aug 9, 2017 at 13:37
Getting undefined for all these
– jjxtra
Commented Feb 5, 2023 at 16:21

Add a comment |

Dariux · Accepted Answer · 2015-05-27 06:47:21Z

28

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.

answered May 27, 2015 at 6:47

Dariux

4,15310 gold badges46 silver badges70 bronze badges

1

Only supports IE10+.
– qarthandso
Commented Jul 21, 2017 at 7:36
33

If they use IE9 or older, they do not deserve the internet.
– Dariux
Commented Jul 23, 2017 at 8:09
Safari iphone does not seem to support this.
– nu everest
Commented Aug 9, 2017 at 13:37
Newer iOS Safari versions should support matchMedia. Source: caniuse.com/#feat=matchmedia
– Vargr
Commented Feb 20, 2019 at 15:53

Add a comment |

user3651121 · Accepted Answer · 2015-01-14 07:34:34Z

10

From W3schools and its cross browser back to the dark ages of IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
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 + ".");

</script>

</body>
</html>

answered Jan 14, 2015 at 7:34

user3651121

1011 silver badge3 bronze badges

The approach works beautifully and could be the accepted answer, because it is much shorter than any other solution (apart from using jQuery).
– Simon Steinberger
Commented May 8, 2015 at 23:07
2

Won't it throw an error if document.documentElement is undefined?
– PhiLho
Commented Sep 14, 2015 at 17:59
This really needs more articulation on what you suggest and why.
– JGallardo
Commented Sep 27, 2023 at 19:00

Add a comment |

Community · Accepted Answer · 2012-11-28 06:37:30Z

7

Here is a shorter version of the function presented above:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}

edited Nov 28, 2012 at 6:37

CommunityBot

11 silver badge

answered Jun 6, 2012 at 16:26

ismael

711 silver badge1 bronze badge

4

Which fails to return a value if all the conditions are false.
– Mike C
Commented Jun 6, 2012 at 16:39
12

You don't need the elses :)
– Nick
Commented Nov 3, 2013 at 6:19

Add a comment |

burkul · Accepted Answer · 2019-12-29 14:43:33Z

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 ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

and call aWidth variable anywhere afterwards.

uma mahesh · Accepted Answer · 2024-03-29 09:38:11Z

1

simple way for all browsers

window.innerWidth

answered Mar 29 at 9:38

uma mahesh

1281 silver badge5 bronze badges

Add a comment |

Sergiu · Accepted Answer · 2019-12-27 08:27:25Z

0

An adapted solution to modern JS of Travis' answer:

const getPageWidth = () => {
  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);
};

answered Dec 27, 2019 at 8:27

Sergiu

1,3961 gold badge18 silver badges33 bronze badges

Add a comment |

Narendra · Accepted Answer · 2021-10-27 00:51:28Z

-1

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() );

edited Oct 27, 2021 at 0:51

Narendra

4,5642 gold badges22 silver badges40 bronze badges

answered Oct 26, 2021 at 17:47

Pepotas

1

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
– Community Bot
Commented Oct 26, 2021 at 19:16
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
– Community Bot
Commented Oct 27, 2021 at 1:50

Add a comment |

Collectives™ on Stack Overflow

How to get browser width using JavaScript code?

10 Answers 10

Update for 2017

Original Answer

Not the answer you're looking for? Browse other questions tagged
javascript
html
css
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Update for 2017

Original Answer

Not the answer you're looking for? Browse other questions tagged javascripthtmlcss or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
html
css
or ask your own question.