Get the height and width of the browser viewport without scrollbars using jquery?

Question

How do I get the height and width of the browser viewport without scrollbars using jQuery?

Here is what I have tried so far:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

This solution does not take into account the browser scrollbars.

Possible duplicate of [How to get screen width without (minus) scrollbar?](http://stackoverflow.com/questions/8339377/how-to-get-screen-width-without-minus-scrollbar) — Bengi Besçeli, Aug 02 '16 at 08:42

score 182 · Answer 1 · edited Sep 01 '18 at 17:21

182

$(window).height();
$(window).width();

More info

Using jQuery is not essential for getting those values, however. Use

document.documentElement.clientHeight;
document.documentElement.clientWidth;

to get sizes excluding scrollbars, or

window.innerHeight;
window.innerWidth;

to get the whole viewport, including scrollbars.

document.documentElement.clientHeight <= window.innerHeight;  // is always true

edited Sep 01 '18 at 17:21

Samuel Katz

24,066
8
71
57

answered Jan 09 '12 at 19:58

Kyle

3,170
1
17
20

thanks Kyle, this does not include the browser scrollbars, right? – Yetimwork Beyene Jan 09 '12 at 20:00
from what I understand about it the 'viewport' of the browser is whatever is view-able, and since the scroll bar cannot have content on it i would assume that is not part of the calculation. However this could change depending on how the browser authors implemented it. – Kyle Jan 09 '12 at 20:09
4

the viewport does not mean the entire width/height of the site's window, it' s just the viewport, use something like ``` window.innerHeight; window.innerWidth;``` – acidjazz Aug 14 '15 at 03:49
@Kyle You're totally correct, as stated here: http://www.w3schools.com/css/css_rwd_viewport.asp _The viewport is the user's visible area of a web page._ – Brad Adams Dec 10 '15 at 01:31
+1 for @acidjazz: use `window.innerHeight` and `window.innerWidth` to get the size of the actual viewport. – Adriano Feb 23 '16 at 18:14
1

**Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.**. Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight – marson parulian Jun 28 '16 at 08:45
The jQuery width reports correctly, but for some reason jQuery reported my window height as 4100 when the correct value should have been 956. window.innerHeight reported correctly. I'll just stick with the vanilla JS approach, but what causes this discrepancy and is the jQuery approach actually safe for others to use? If not, the answer should be updated to note that. This happened on Chrome 70.0.3538.110 on Windows 10. – Nicholas Dec 20 '18 at 16:59
@Nicholas, I saw the same just now. jQuery 3.3.1 reporting impossible values on Crome. innerHeight is correct. – Shirky Jan 06 '19 at 22:48

Sakata Gintoki · Answer 2 · 2019-06-12T06:53:52.533

44

Don't use jQuery, just use javascript for correct result:

This includes scrollbar width/height:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);

This excludes scrollbar width/height:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

edited Jun 12 '19 at 06:53

answered Jan 26 '16 at 06:55

Sakata Gintoki

1,817
16
23

Thank you, jQuery innerWidth and innerHeight methods return incorrect results indeed. – jck Sep 26 '16 at 14:05
console.log(window.innerHeight); console.log(document.body.clientHeight); console.log($( window ).height()); Last is not correct. Your solution is best for me. Thanks. – Ali Han Nov 14 '19 at 01:02
1

The problem with this is that `document.body.clientHeight` returns the height of the entire page, not the viewport. – ICW Feb 18 '21 at 17:28

score 27 · Answer 3 · answered Sep 26 '12 at 09:17

27

Here is a generic JS which should work in most browsers (FF, Cr, IE6+):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

answered Sep 26 '12 at 09:17

Vilmantas Baranauskas

6,596
3
38
50

this only worked for me. window. height is giving something which I can not calculate any how. – Amit Kumar Gupta May 28 '13 at 13:39

score 12 · Answer 4 · edited Jan 22 '15 at 19:38

12

You're using the wrong method calls. A viewport is the "window" that's open on the document: how much of it you can see and where.

Using $(window).height() will not give you the viewport size it will give you the size of the entire window, which is usually the size of the entire document though the document could be even larger.

To get the size of the actual viewport use window.innerHeight and window.innerWidth.

https://gist.github.com/bohman/1351439

Do not use the jQuery methods, e.g. $(window).innerHeight(), as these give the wrong numbers. They give you the window's height, not innerHeight.

edited Jan 22 '15 at 19:38

Alexander Vogt

17,879
13
52
68

answered Jan 22 '15 at 19:18

Mikbe

129
1
2

9

When the window has scrollbar (added by the browser), the `window.innerWidth` returns the width of the viewport + the width of the scrollbar. what can I do in this situation? – Victor Mar 22 '15 at 20:18

score 9 · Answer 5 · edited Jun 20 '20 at 09:12

9

Description

The following will give you the size of the browsers viewport.

Sample

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

More Information

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 09 '12 at 19:57

dknaack

60,192
27
155
202

Fábio Antunes · Answer 6 · 2012-12-07T02:07:58.123

As Kyle suggested, you can measure the client browser viewport size without taking into account the size of the scroll bars this way.

Sample (Viewport dimensions WITHOUT scroll bars)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Alternatively if you wish to find the dimensions of the client viewport while taking into account the size of the scroll bars, then this sample bellow best suits you.

First don't forget to set you body tag to be 100% width and height just to make sure the measurement is accurate.

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

Sample (Viewport dimensions WITH scroll bars)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

score 4 · Answer 7 · edited Jun 27 '14 at 18:38

The script $(window).height() does work well (showing the viewport's height and not the document with scrolling height), BUT it needs that you put correctly the doctype tag in your document, for example these doctypes:

For html5: <!doctype html>

for transitional html4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Probably the default doctype assumed by some browsers is such, that $(window).height() takes the document's height and not the browser's height. With the doctype specification, it's satisfactorily solved, and I'm pretty sure you peps will avoid the "changing scroll-overflow to hidden and then back", which is, I'm sorry, a bit dirty trick, specially if you don't document it on the code for future programmer's usage.

Moreover, if you are doing a script, you can invent tests to help programmers in your libraries, let me invent a couple:

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called JQuery library");
    }
    if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
    } 
});

score 3 · Answer 8 · edited Oct 14 '16 at 14:38

3

$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

edited Oct 14 '16 at 14:38

techspider

3,370
13
37
61

answered Oct 14 '16 at 14:21

Anamoul ROUF

31
1

score 0 · Answer 9 · answered Apr 27 '16 at 07:43

Using jQuery ...

$(document).height() & $(window).height() will return the same values ... the key is to reset body's padding and margin so that you get no scrolling.

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

Hope this helps.

score 0 · Answer 10 · edited Jul 24 '18 at 00:49

I wanted a different look of my website for width screen and small screen. I have made 2 CSS files. In Java I choose which of the 2 CSS file is used depending on the screen width. I use the PHP function echo with in the echo-function some javascript.

my code in the <header> section of my PHP-file:

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>

Get the height and width of the browser viewport without scrollbars using jquery?

10 Answers10

Description

Sample

More Information

Linked