Categories
cross-browser html javascript jquery layout

Get the size of the screen, current web page and browser window

2335

How can I get windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY which will work in all major browsers?

screenshot describing which values are wanted

6

1600

You can get the size of the window or document with jQuery:

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

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

For screen size you can use the screen object:

window.screen.height;
window.screen.width;

20

  • 3

    The jQuery method height() seems to work for all elements, and returns a number (46) rather than a string like css(‘height’) ("46px").

    – Chris

    Feb 6, 2013 at 16:02

  • 8

    When dealing with mobile Safari, sadly jQuery isn’t a perfect solution to this question. See the note on line #13 at github.com/jquery/jquery/blob/master/src/dimensions.js

    – Joshua

    Jun 19, 2013 at 17:10


  • 24

    @Marco Kerwitz The worst thing is that I typed “javascript get window width” and the content of this answer was on Google. A big minus one from me.

    Jun 11, 2016 at 7:43

  • 2

    @AdamArold Stop commenting without knowing the facts. The original question specifically asked for JQuery specific answer and since then has been edited several times by moderators. There are other answers with vanilla javascript solutions, go for them if you do not like JQuery.

    Jan 18, 2017 at 2:14


  • 6

    The OP DID ASK that jquery is an option. Whoever ninja edited the original question to exclude it is at fault here, not people giving legit answers using a worldly-accepted javascript library.

    Feb 3, 2018 at 14:03

1097

This has everything you need to know: Get viewport/window size

but in short:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

Fiddle

Please stop editing this answer. It’s been edited 22 times now by different people to match their code format preference. It’s also been pointed out that this isn’t required if you only want to target modern browsers – if so you only need the following:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

8

  • 64

    Why not g = document.body ?

    Jan 27, 2014 at 3:32

  • 52

    @apaidnerd: Standards defying browsers like IE8 do not support document.body. IE9, however, does.

    Jan 27, 2014 at 22:34

  • 49

    @MichaelMikowski That is not true! Even IE5 supports document.body.

    – Nux

    Sep 27, 2014 at 19:48

  • 33

    @nux I stand corrected, and I’ve confirmed support in IE8. I know though that at least one brower we were targeting recently did not support document.body and we had to change to use the getElementsByTagName approach. But I guess I misremembered the browser. Sorry!

    Sep 28, 2014 at 1:07


  • 40

    I would just like to very quierly remark that one-letter variable names are never helpful.

    – wybe

    Jun 2, 2018 at 23:27

547

Here is a cross browser solution with pure JavaScript (Source):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

5

  • 12

    This is better because if you are able to call the script early enough in the loading process (often the idea), then the body element will return a value of undefined as the dom isn’t loaded yet.

    – dgo

    Aug 14, 2015 at 19:00


  • 21

    HA! Old thread but thanks for that! I guess I’m one of those old “idiots” that tries to support at least back to IE8 when possible, for the benefit of the surprising number of older home users who will never stop using XP until their machines catch fire. I get tired of asking questions and instead of getting an answer, getting down-voted with only “STOP SUPPORTING IE8!!” as a comment. Again thanks! This solved a problem for me in a pure javascript photo zoom I had done. Its a little slow on IE8, but now at least it works!!! 🙂

    – Randy

    Sep 15, 2016 at 20:32

  • @Randy Can’t an old Windows XP machine simply run a new version of Fire-Fox or whatever?

    Sep 29, 2021 at 23:59

  • @WinEunuuchs2Unix Since I commented in 2016 that the answer solved my problem, why would switching browsers matter? You can’t tell your site visitors to switch browsers. If the site doesn’t work, they leave. And NO< you can’t load the latest Firefox browser on a Windows XP machine.

    – Randy

    Oct 1, 2021 at 4:57

  • @WinEunuuchs2Unix There are many environments that cannot be elaborated on which REQUIRE specific versions of the applications being run. There are many reasons, including ease of upgrade, confidence in the version being used, the overhead of certifying a new version of the application, the cost of doing the upgrading and training the users, etc. I worked on such projects and we had to buy replacement computers on eBay because they were no longer available as new. Its the way the contract was written.

    Jan 22 at 20:54