# javascript – How to get the browser viewport dimensions?

## The Question :

851 people think this question is useful

I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size?

Or better yet, the viewport size of the browser with JavaScript? See green area here:

• What i do is, set an element usually html to 100% height and get its height. Simple works everywhere.
• @MuhammadUmer good catch! If you get frustrated getting the dimensions (and you will, on mobile phones without jQuery), you can getComputedStyle of the expanded html tag.
• Also, you can use the W library, which handles cross-browser viewport detection 😉

1420 people think this answer is useful

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

## Resources

112 people think this answer is useful

jQuery dimension functions

$(window).width() and $(window).height()

80 people think this answer is useful

You can use the window.innerWidth and window.innerHeight properties.

34 people think this answer is useful

If you aren’t using jQuery, it gets ugly. Here’s a snippet that should work on all new browsers. The behavior is different in Quirks mode and standards mode in IE. This takes care of it.

var elem = (document.compatMode === "CSS1Compat") ?
document.documentElement :
document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;



17 people think this answer is useful

I looked and found a cross browser way:

function myFunction(){
if(window.innerWidth !== undefined &amp;&amp; window.innerHeight !== undefined) {
var w = window.innerWidth;
var h = window.innerHeight;
} else {
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
}
var txt = "Page size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}

<!DOCTYPE html>
<html>
<p>
Try to resize the page.
</p>
<p id="demo">
&amp;nbsp;
</p>
</body>
</html>


14 people think this answer is useful

I know this has an acceptable answer, but I ran into a situation where clientWidth didn’t work, as iPhone (at least mine) returned 980, not 320, so I used window.screen.width. I was working on existing site, being made “responsive” and needed to force larger browsers to use a different meta-viewport.

Hope this helps someone, it may not be perfect, but it works in my testing on iOs and Android.

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width
//first see if they have window.screen.width avail
(function() {
if (window.screen.width)
{
var setViewport = {
//smaller devices
phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
//bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints
other: 'width=1045,user-scalable=yes',
//current browser width
widthDevice: window.screen.width,
//your css breakpoint for mobile, etc. non-mobile first
widthMin: 560,
//add the tag based on above vars and environment
setMeta: function () {
var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other;
var viewport = document.createElement('meta');
viewport.setAttribute('name','viewport');
viewport.setAttribute('content',params);
}
}
//call it
setViewport.setMeta();
}
}).call(this);



12 people think this answer is useful

I was able to find a definitive answer in JavaScript: The Definitive Guide, 6th Edition by O’Reilly, p. 391:

This solution works even in Quirks mode, while ryanve and ScottEvernden’s current solution do not.

function getViewportSize(w) {

// Use the specified window or the current window if no argument
w = w || window;

// This works for all browsers except IE8 and before
if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

// For IE (or any browser) in Standards mode
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight };

// For browsers in Quirks mode
return { w: d.body.clientWidth, h: d.body.clientHeight };

}



except for the fact that I wonder why the line if (document.compatMode == "CSS1Compat") is not if (d.compatMode == "CSS1Compat"), everything looks good.

12 people think this answer is useful

If you are looking for non-jQuery solution that gives correct values in virtual pixels on mobile, and you think that plain window.innerHeight or document.documentElement.clientHeight can solve your problem, please study this link first: https://tripleodeon.com/assets/2011/12/table.html

The developer has done good testing that reveals the problem: you can get unexpected values for Android/iOS, landscape/portrait, normal/high density displays.

My current answer is not silver bullet yet (//todo), but rather a warning to those who are going to quickly copy-paste any given solution from this thread into production code.

I was looking for page width in virtual pixels on mobile, and I’ve found the only working code is (unexpectedly!) window.outerWidth. I will later examine this table for correct solution giving height excluding navigation bar, when I have time.

11 people think this answer is useful
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}



NB : to read the width, use console.log('viewport width'+viewport().width);

10 people think this answer is useful

There is a difference between window.innerHeight and document.documentElement.clientHeight. The first includes the height of the horizontal scrollbar.

7 people think this answer is useful

A solution that would conform to W3C standards would be to create a transparent div (for example dynamically with JavaScript), set its width and height to 100vw/100vh (Viewport units) and then get its offsetWidth and offsetHeight. After that, the element can be removed again. This will not work in older browsers because the viewport units are relatively new, but if you don’t care about them but about (soon-to-be) standards instead, you could definitely go this way:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);



Of course, you could also set objNode.style.position = “fixed” and then use 100% as width/height – this should have the same effect and improve compatibility to some extent. Also, setting position to fixed might be a good idea in general, because otherwise the div will be invisible but consume some space, which will lead to scrollbars appearing etc.

4 people think this answer is useful

This is the way I do it, I tried it in IE 8 -> 10, FF 35, Chrome 40, it will work very smooth in all modern browsers (as window.innerWidth is defined) and in IE 8 (with no window.innerWidth) it works smooth as well, any issue (like flashing because of overflow: “hidden”), please report it. I’m not really interested on the viewport height as I made this function just to workaround some responsive tools, but it might be implemented. Hope it helps, I appreciate comments and suggestions.

function viewportWidth () {
if (window.innerWidth) return window.innerWidth;
var
doc = document,
html = doc &amp;&amp; doc.documentElement,
body = doc &amp;&amp; (doc.body || doc.getElementsByTagName("body")[0]),
getWidth = function (elm) {
if (!elm) return 0;
var setOverflow = function (style, value) {
var oldValue = style.overflow;
style.overflow = value;
return oldValue || "";
}, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
setOverflow(style, oldValue);
return width;
};
return Math.max(
getWidth(html),
getWidth(body)
);
}



1 people think this answer is useful

If you are using React, then with latest version of react hooks, you could use this.

// Usage
function App() {
const size = useWindowSize();

return (
<div>
{size.width}px / {size.height}px
</div>
);
}



https://usehooks.com/useWindowSize/

you can use window.addEventListener('resize' , yourfunction); it will runs yourfunction when the window resizes. when you use window.innerWidth or document.documentElement.clientWidth it is read only. you can use if statement in yourfunction and make it better.