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

Question

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

Solution 1

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;

Solution 2

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);

Solution 3

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;

Solution 4

A non-jQuery way to get the available screen dimension. window.screen.width/height has already been put up, but for responsive webdesign and completeness sake I think its worth to mention those attributes:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth and availHeight - The available width and height on the screen (excluding OS taskbars and such).

Solution 5

But when we talk about responsive screens and if we want to handle it using jQuery for some reason,

window.innerWidth, window.innerHeight

gives the correct measurement. Even it removes the scroll-bar's extra space and we don't need to worry about adjusting that space :)

View more solutions

Comments

[befzz]

pageHeight(on a pic) u can get with: document.body.scrollHeight

[rawiro]

see https://developer.mozilla.org/en-US/docs/Web/API/Window.scre‌​en and http://www.quirksmode.org/dom/w3c_cssom.html#screenview

[MEM]

Could this be relevant as well? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

[Déjà vu]

Interesting: ryanve.com/lab/dimensions

[Uncle Iroh]

Helpful tutorial -- w3schools.com/jsref/prop_win_innerheight.asp

[Roy Prins]

As others have commented under the answers, there are better solutions than the accepted answer. Please consider changing the accepted answer.

[turtledove]

thanks, and is there any way to get pageX, pageY, screenX, screenY?

[Chris]

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

[Joshua]

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

[Matt Zelenak]

@turtledove sure, chain in together. Req jQuery: $(document).ready(function(){ var window_height = $(this).(window).height() + "px"; var dimensions = $("body").css("height" , window_height); var window_width = $(this).(window).width() + "px"; var dimensions = $("body").css("width" , window_width); })

[a paid nerd]

Why not g = document.body ?

[Michael Mikowski]

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

[Daniel W.]

@웃웃웃웃웃 what did you edit in the answer? according to the revisions, you didn't edit anything at all

[Ankit Jaiswal]

@mrplants These are all in pixels.

[Nux]

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

[Michael Mikowski]

@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!

[Dariux]

screen.height - in android default browser gets one value, in android chrome browser get another value. I think in chrome height is divided by pixel ratio. For example if height is 800, and px ratio is 1.5 then on chrome is is 800/1.5 = 533

[mseddon]

@MarcoKerwitz I have become fairly familiar with the jquery source. Lucky me.

[dgo]

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.

[sigod]

@DanFromGermany There was 2 new lines in the end of the file. He removed one of them.

[Ankit Jaiswal]

@Alberto the original question when asked was asking about a Jquery solution and has been updated several times since then.

[Alberto Bonsanto]

If that is the case, why does your answer, which involves jQuery, still accepted as the correct answer if it is outdated? I don't try to be silly, I just get really annoyed every time I find something like this

[Adi Prasetyo]

could you update which explain browser viewport, html document and screen?

[Maciej Krawczyk]

@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.

[Randy]

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!!! :-)

[Adam Arold]

Stop giving jquery specific answers. The OP DID NOT ask for a jquery answer.

[Ankit Jaiswal]

@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.

[Adam Arold]

I know the facts. Stop assuming that I do not. The fact is that there is no jquery tag currently on the answer so your answer is out of place. Plus originally the question did not contain the jquery tag either. It was added later by someone but without need.

[GreySage]

Note that if you change your screen resolution, the returned screen width/height values will change accordingly. In other words, you are NOT getting the physical dimensions, but rather the pixel dimensions.

[BryanGrezeszak]

@AdamArold - Actually, as much as I dislike the fact, the original question did specifically state "or jquery" in its text. I hate jQuery too, but it's hard to flog the answerer when the OP specifically stated it as an allowable answer.

[Admin]

!screen-ok

[IncredibleHat]

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.

[wybe]

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

[M.Abulsoud]

This not working if you are embedding an iframe and trying to get the height of the view port. window.innerHeight equal to the document height which is buggy.

[Nick Steele]

In 2020 asking how to do something with JQuery is really, really annoying... More devs do not use it than do. We can do better people. We can do better.

[Nick Steele]

Good point. I probably should have said getting highly rated answers involving a depreciated library that is no longer relevant all over stackoverflow in your search for an answer makes the entire platform worth less, prolongs the demise of outdated software, and wrongly indicates to new members of the community that older libraries are more relevant than they are. Stack exchange needs a depreciation feature or something.

[Nick Steele]

Now that I think about it... Wow. This answer is 10 years old. Before even IE11. There should be some kind of aging feature on stack exchange networks. This is going to crush the entire platform in a few years. Popular answers like this take a long time for the community to upvote something else. We need a "depreciated" tag or something

[Sukhpreet Singh Alang]

screenX/Y is relative to the primary screen, not relative to the left/top most screen. That's why the value is negative if you're currently on a screen to the left of the primary screen.

[WinEunuuchs2Unix]

This is the second time in two days I've seen "modern browser" in answer written in 2012. Is it safe to assume now that 2022 is around the corner the answer is for "all" browsers?

[WinEunuuchs2Unix]

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

[WinEunuuchs2Unix]

Thanks for the modern answer. I hope it gets voted further up towards the top of the page. Quick question, how do you rerun function when window is resized?

[Randy]

One annoyance is that that some browsers will throw a fit (meaning it can't even be caught with a try/catch construct) if you even have a reference to non existent document or window properties. That means you just about have to detect the browser and use document.write to dynamically add code when its safe to do so. Bottom line. being compatible with all browsers back to IE-8 is getting to be a chore that even the best of us are ready to give up on.

[Randy]

@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.

[Helge Drews]

@WinEunuuchs2Unix You can use the resize event. See developer.mozilla.org/en-US/docs/Web/API/Window/resize_event or this Stackoverflow Post: stackoverflow.com/a/18520448/4945601

[Shardul Birje]

@WinEunuuchs2Unix I think the code would work for all browsers..Since Microsoft has decided to discontinue Internet Explorer in 2022..It was/is the only browser which needed "special treatment"..

[user3481644]

@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.