How do I get the browser window's width, regardless of the body's scrollbar?

Question

The common ways to get the browser's width are all dependent on whether or not <body> has a scrollbar. For example, window.innerWidth, document.documentElement.clientWidth, $(window).width(), $(window).outerWidth(), etc all return different results for the following 2 cases:

<html>
<body>
<p>No scrollbar.</p>
</body>
</html>

and

<html>
<body>
<p style="height:10000px">Yes scrollbar.</p>
</body>
</html>

$(window).width(), etc, all return a higher value for the first case because the scrollbar's width is subtracted for the second case.

How can I reliably get the browser window's actual width regardless of the scrollbar's existence?

Edit: The suggested possible duplicate's answer says to use $(window).width() while I specifically said $(window).width() doesn't work.

possible duplicate of [Get the height and width of the browser viewport without scrollbars using jquery?](http://stackoverflow.com/questions/8794338/get-the-height-and-width-of-the-browser-viewport-without-scrollbars-using-jquery) — Zakaria Acharki, Jul 16 '15 at 03:52
I just created 2 fiddles for you. and to my surprise the `window` width remains same even though scroll bar exists. **[Without ScrollBar](https://jsfiddle.net/Guruprasad_Rao/ekLzxj6e/)** - **[Result](https://jsfiddle.net/Guruprasad_Rao/ekLzxj6e/embedded/result/)**, **[With ScrollBar](https://jsfiddle.net/Guruprasad_Rao/7datv07o/)** - **[Result](https://jsfiddle.net/Guruprasad_Rao/7datv07o/embedded/result/)** — Guruprasad J Rao, Jul 16 '15 at 03:56
@GuruprasadRao I think that may have to do with JSFiddle's iframes. Try `window.innerWidth` on a SO page, then delete all the content and try again. I got different widths. — Leo Jiang, Jul 16 '15 at 04:01
@Linksku Again to my surprise I got same width.. **[With Scrollbar](http://postimg.org/image/petaq7055/)**, **[Without Scrollbar](http://postimg.org/image/3lkw7gi8l/)** — Guruprasad J Rao, Jul 16 '15 at 04:13
@GuruprasadRao I found my mistake. I've always used `window.innerWidth` and `$(window).innerWidth()` interchangeably. However, it appears that `window.innerWidth` accounts for the scrollbar while `$(window).innerWidth()` doesn't. I will do more testing to see if `window.innerWidth` solves my problems. Thanks for helping me find the problem! — Leo Jiang, Jul 16 '15 at 05:20

score 1 · Accepted Answer · edited Jul 16 '15 at 04:17

1

Please try this

I dont know whether this method is correct or no. But you will get actual width 677 of the sample window

$(document).ready(function(){
    $("body").css("overflow", "hidden");
    alert($(window).width());
    $("body").css("overflow", "auto");
});

DEMO

You will get the width of the window with the scroll bar as 677 when there is no overflow. Demo for screen width without scroll bar

You will get the width of the window with the scroll bar as 660 when there is overflow. Demo for scree width with scroll bar.

edited Jul 16 '15 at 04:17

jasonscript

6,039
3
28
43

answered Jul 16 '15 at 03:54

Rino Raj

6,264
2
27
42

This worked, nice solution! However, this is sort of a "hacky" solution, so I'll leave this question open for a while and see if there's a cleaner solution. – Leo Jiang Jul 16 '15 at 05:13
@Linksku Ha ha... I liked the usage.. "Hacky" – Rino Raj Jul 23 '15 at 11:08

score 1 · Answer 2 · answered Jul 16 '15 at 04:02

Here is a nice run down of viewport properties from the Quirks Mode site.

The window.innerWidth is the simplest way of getting this (supported in IE9+ and all other browsers)

// Get the size of the viewport including scrollbars:
var width = window.innerWidth;
console.log('innerWidth=', width);

And here is the MDN documentation on the innerWidth property.

How do I get the browser window's width, regardless of the body's scrollbar?

2 Answers2