How to get viewport height of screen of browser?

Question

All questions I see answer:

$(window).height();

But this returns not the size of viewport but size of page, for example if I style <body> to height 1000px this will return 1000 but not the size of view port. I need size of viewport not the collective page size that is scroll able.

possible duplicate: http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript — tanaydin, Dec 23 '14 at 08:59
NO `Math.max(document.documentElement.clientHeight, window.innerHeight || 0)` is also outputting height of page size i.e. 1000 that is way larger than viewport. — XIMRX, Dec 23 '14 at 09:04

score 2 · Answer 1 · answered Dec 23 '14 at 09:03

You can try

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
if(window.innerWidth !== undefined && 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;
}
</script>
<body onresize="myFunction()" onload="myFunction()">
<p>
Try to resize the page.
</p>
<p id="demo">
&nbsp;
</p>
</body>
</html>

Arnaud Leyder · Answer 2 · 2014-12-23T11:11:34.607

$(window).height();

should return the height of the viewport (even if you set the height of the body tag in pixels). I also use:

var heightViewport = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

which has given me better accuracy on iOS especially.

$(document).height();

should return the height of the document (hence the height of the body tag in your case).

Are your sure you are not using document instead of window?

Makaze · Answer 3 · 2014-12-23T09:13:42.937

0

It will return the size of the viewport.

$('#viewportDimensions').text($(window).width() + ', ' + $(window).height());

$(window).resize(function() {
  $('#viewportDimensions').text($(window).width() + ', ' + $(window).height());
});

resize page in fiddle

edited Dec 23 '14 at 09:13

answered Dec 23 '14 at 09:04

Makaze

1,076
7
13

score 0 · Answer 4 · answered Dec 23 '14 at 09:40

try this:

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];
var x=w.innerWidth||e.clientWidth||g.clientWidth;
var y=w.innerHeight||e.clientHeight||g.clientHeight;
    console.log(x,y);

main source:http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

How to get viewport height of screen of browser?

4 Answers4