Get the screen resolution, current web page, and browser window sizes.

Problem

How do I acquire windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY, pageX, pageY, screenX, screenY that will function in all major browsers?

Asked by turtledove

Solution #1

jQuery may be used to determine the size of a window or document:

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

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

You can use the screen object to determine the size of the screen:

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

Answered by Ankit Jaiswal

Solution #2

Everything you need to know is in this document: Get the size of the viewport/window

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 don’t make any more changes to this response. It has already been modified 22 times by different persons to reflect their preferred coding format. It’s also worth noting that if you only wish to target current browsers, this isn’t necessary; in that case, 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);

Answered by sidonaldson

Solution #3

Here’s an example of a cross-browser solution using only JavaScript (Source):

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

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

Answered by confile

Solution #4

A non-jQuery method of determining the available screen size. Although window.screen.width/height has already been mentioned, I believe it is worth mentioning those qualities for the sake of completeness and responsive webdesign:

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

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

Answered by Daniel W.

Solution #5

However, when it comes to responsive screens, and if we need to use jQuery for whatever reason,

window.innerWidth, window.innerHeight

provides the accurate measuring Even the scroll-additional bar’s space is removed, so we don’t have to worry about resizing it:)

Answered by Aabha Pandey

Post is based on https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window