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?

Arce

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

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

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

Interesting: ryanve.com/lab/dimensions – Jerrybuilt

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

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

Answer 1

These days, for screen size you can use the screen object:

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

Legacy

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

Juryman

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

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

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 – Helsell

@Arce 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); }) – R

@mrplants These are all in pixels. – Juryman

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 – Sebaceous

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

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 – Gulley

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

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

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

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

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. – Arbuckle

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. – Uprising

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

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. – Fistula

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. – Mindy

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. – Gearing

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. – Gearing

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 – Gearing

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

Belligerence

Why not g = document.body ? – Dannydannye

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

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

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

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

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? – Exceed

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. – Hereafter

@Exceed 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".. – Vulgarity

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

Anorthosite

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. – Deragon

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

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

@Exceed 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. – Hereafter

@Exceed 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. – Palatial

Answer 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).

Raffin

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

Lenalenard

Answer 6

Full 2020

I am surprised that question have about 10 years and it looks like so far nobody has given a full answer (with 10 values) yet. So I carefully analyse OP question (especially picture) and have some remarks

• center of coordinate system (0,0) is in the viewport (browser window without bars and main borders) top left corner and axes are directed to right and down (what was marked on OP picture) so the values of pageX, pageY, screenX, screenY must be negative (or zero if page is small or not scrolled)
• for screenHeight/Width OP wants to count screen height/width including system menu bar (eg. in MacOs) - this is why we NOT use .availWidth/Height (which not count it)
• for windowWidth/Height OP don't want to count size of scroll bars so we use .clientWidth/Height
• the screenY - in below solution we add to position of top left browser corner (window.screenY) the height of its menu/tabls/url bar). But it is difficult to calculate that value if download-bottom bar appears in browser and/or if developer console is open on page bottom - in that case this value will be increased of size of that bar/console height in below solution. Probably it is impossible to read value of bar/console height to make correction (without some trick like asking user to close that bar/console before measurements...)
• pageWidth - in case when pageWidth is smaller than windowWidth we need to manually calculate size of <body> children elements to get this value (we do example calculation in contentWidth in below solution - but in general this can be difficult for that case)
• for simplicity I assume that <body> margin=0 - if not then you should consider this values when calculate pageWidth/Height and pageX/Y

function sizes() {
  const contentWidth = [...document.body.children].reduce( 
    (a, el) => Math.max(a, el.getBoundingClientRect().right), 0) 
    - document.body.getBoundingClientRect().x;

  return {
    windowWidth:  document.documentElement.clientWidth,
    windowHeight: document.documentElement.clientHeight,
    pageWidth:    Math.min(document.body.scrollWidth, contentWidth),
    pageHeight:   document.body.scrollHeight,
    screenWidth:  window.screen.width,
    screenHeight: window.screen.height,
    pageX:        document.body.getBoundingClientRect().x,
    pageY:        document.body.getBoundingClientRect().y,
    screenX:     -window.screenX,
    screenY:     -window.screenY - (window.outerHeight-window.innerHeight),
  }
}



// TEST

function show() {
  console.log(sizes());
}

body { margin: 0 }
.box { width: 3000px; height: 4000px; background: red; }

<div class="box">
  CAUTION: stackoverflow snippet gives wrong values for screenX-Y, 
  but if you copy this code to your page directly the values will be right<br>
  <button onclick="show()" style="">CALC</button>
</div>

I test it on Chrome 83.0, Safari 13.1, Firefox 77.0 and Edge 83.0 on MacOs High Sierra

Mccloud

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? – Exceed

@Exceed You can use the resize event. See developer.mozilla.org/en-US/docs/Web/API/Window/resize_event or this Stackoverflow Post: https://mcmap.net/q/40981/-javascript-window-resize-event – Conias

Answer 7

Graphical answer: (............)

Masquer

Answer 8

function wndsize(){
  var w = 0;var h = 0;
  //IE
  if(!window.innerWidth){
    if(!(document.documentElement.clientWidth == 0)){
      //strict mode
      w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
    } else{
      //quirks mode
      w = document.body.clientWidth;h = document.body.clientHeight;
    }
  } else {
    //w3c
    w = window.innerWidth;h = window.innerHeight;
  }
  return {width:w,height:h};
}
function wndcent(){
  var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
  var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
  //IE
  if(!window.pageYOffset){
    //strict mode
    if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
    //quirks mode
    else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
    //w3c
    else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
    return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');

Outcast

Answer 9

You can also get the WINDOW width and height, avoiding browser toolbars and other stuff. It is the real usable area in browser's window.

To do this, use: window.innerWidth and window.innerHeight properties (see doc at w3schools).

In most cases it will be the best way, in example, to display a perfectly centred floating modal dialog. It allows you to calculate positions on window, no matter which resolution orientation or window size is using the browser.

Attaboy

Answer 10

To check height and width of your current loaded page of any website using "console" or after clicking "Inspect".

step 1: Click the right button of mouse and click on 'Inspect' and then click 'console'

step 2: Make sure that your browser screen should be not in 'maximize' mode. If the browser screen is in 'maximize' mode, you need to first click the maximize button (present either at right or left top corner) and un-maximize it.

step 3: Now, write the following after the greater than sign ('>') i.e.

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

Snowbound

Answer 11

Complete guide related to Screen sizes

JavaScript

For height:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Note: When the window is maximized this will equal screen.availHeight

For width:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

Jquery

For height:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

For width:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Reference: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

Grimsley

Answer 12

With the introduction of globalThis in ES2020 you can use properties like.

For screen size:

globalThis.screen.availWidth 
globalThis.screen.availHeight

For Window Size

globalThis.outerWidth
globalThis.outerHeight

For Offset:

globalThis.pageXOffset
globalThis.pageYOffset

...& so on.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)

Nim

Answer 13

If you need a truly bulletproof solution for the document width and height (the pageWidth and pageHeight in the picture), you might want to consider using a plugin of mine, jQuery.documentSize.

It has just one purpose: to always return the correct document size, even in scenarios when jQuery and other methods fail. Despite its name, you don't necessarily have to use jQuery – it is written in vanilla Javascript and works without jQuery, too.

Usage:

var w = $.documentWidth(),
    h = $.documentHeight();

for the global document. For other documents, e.g. in an embedded iframe you have access to, pass the document as a parameter:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

Update: now for window dimensions, too

Ever since version 1.1.0, jQuery.documentSize also handles window dimensions.

That is necessary because

• $( window ).height() is buggy in iOS, to the point of being useless
• $( window ).width() and $( window ).height() are unreliable on mobile because they don't handle the effects of mobile zooming.

jQuery.documentSize provides $.windowWidth() and $.windowHeight(), which solve these issues. For more, please check out the documentation.

Girder

Answer 14

I wrote a small javascript bookmarklet you can use to display the size. You can easily add it to your browser and whenever you click it you will see the size in the right corner of your browser window.

Here you find information how to use a bookmarklet https://en.wikipedia.org/wiki/Bookmarklet

Bookmarklet

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

Original Code

The original code is in coffee:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

Basically the code is prepending a small div which updates when you resize your window.

Freemason

Answer 15

In some cases related with responsive layout $(document).height() can return wrong data that displays view port height only. For example when some div#wrapper has height:100%, that #wrapper can be stretched by some block inside it. But it's height still will be like viewport height. In such situation you might use

$('#wrapper').get(0).scrollHeight

That represents actual size of wrapper.

Truss

Answer 16

You should use window.devicePixelRatio to get REAL proportions.

_{(Header is for attention.)}

You can't get correct screen width and/or height using ONLY window.screen, that is a lie. User may use zooming, so you should count that too.

There is how you can get correct screen proportions (try to use in-browser zooming):

let screenWidth
let screenHeight

let realScreenWidth
let realScreenHeight

displayProperties()

window.addEventListener('resize', displayProperties)

function displayProperties() {
  setProperties()
  getProperties()
}

function getProperties() {
  console.clear()
  console.log('Screen proportions', screenWidth + 'x' + screenHeight)
  console.log('REAL screen proportions', realScreenWidth + 'x' + realScreenHeight)
}

function setProperties() {
  screenWidth = window.screen.width
  screenHeight = window.screen.height

  realScreenWidth = Math.round(window.devicePixelRatio * screenWidth)
  realScreenHeight = Math.round(window.devicePixelRatio * screenHeight)
}

Same with the page's width and height:

let pageWidth
let pageHeight

let realPageWidth
let realPageHeight

getProperties()

window.addEventListener('resize', getProperties)

function getProperties() {
  setProperties()

  console.clear()
  console.log('Page proportions', pageWidth + '-' + pageHeight)
  console.log('REAL page proportions', realPageWidth + '-' + realPageHeight)
}

function setProperties() {
  generateRandomPageProportions()

  pageWidth = document.body.clientWidth
  pageHeight = document.body.clientHeight

  realPageWidth = Math.round(pageWidth * window.devicePixelRatio)
  realPageHeight = Math.round(pageHeight * window.devicePixelRatio)
}

function generateRandomPageProportions() {
  const randomPageWidth = random(100, 300)
  const randomPageHeight = random(100, 300)

  document.body.style.width = randomPageWidth + 'vw'
  document.body.style.height = randomPageHeight + 'vh'
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min)) + min
}

As you may guess, same with window's width and height.

let windowWidth
let windowHeight

let realWindowWidth
let realWindowHeight

getProperties()

window.addEventListener('resize', getProperties)

function getProperties() {
  setProperties()

  console.clear()
  console.log('Window proportions', windowWidth + '-' + windowHeight)
  console.log('REAL window proportions', realWindowWidth + '-' + realWindowHeight)
}

function setProperties() {
  windowWidth = window.innerWidth
  windowHeight = window.innerHeight

  realWindowWidth = Math.round(windowWidth * window.devicePixelRatio)
  realWindowHeight = Math.round(windowHeight * window.devicePixelRatio)
}

Solution

Using previous code that I wrote, we can finally get full code.

let size

;(function() {
  size = {}
  
  setProperties()

  window.addEventListener('resize', setProperties)

  function setProperties() {
    size.screenWidth = roundify(window.screen.width)
    size.screenHeight = roundify(window.screen.height)
    size.pageWidth = roundify(document.body.clientWidth)
    size.pageHeight = roundify(document.body.clientHeight)
    size.windowWidth = roundify(window.innerWidth)
    size.windowHeight = roundify(window.innerHeight)

    function roundify(n) {
      return Math.round(n * window.devicePixelRatio)
    }
  }
})();

function displaySize() {
  console.clear()
  console.log(size)
}

displaySize()

window.addEventListener('resize', displaySize)

Joashus

Answer 17

I developed a library for knowing the real viewport size for desktops and mobiles browsers, because viewport sizes are inconsistents across devices and cannot rely on all the answers of that post (according to all the research I made about this) : https://github.com/pyrsmk/W

Remington

Answer 18

Sometimes you need to see the width/height changes while resizing the window and inner content.

For that I've written a little script that adds a log box that dynamicly monitors all the resizing and almost immediatly updates.

It adds a valid HTML with fixed position and high z-index, but is small enough, so you can:

• use it on an actual site
• use it for testing mobile/responsive views

Tested on: Chrome 40, IE11, but it is highly possible to work on other/older browsers too ... :)

  function gebID(id){ return document.getElementById(id); }
  function gebTN(tagName, parentEl){ 
     if( typeof parentEl == "undefined" ) var parentEl = document;
     return parentEl.getElementsByTagName(tagName);
  }
  function setStyleToTags(parentEl, tagName, styleString){
    var tags = gebTN(tagName, parentEl);
    for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
  }
  function testSizes(){
    gebID( 'screen.Width' ).innerHTML = screen.width;
    gebID( 'screen.Height' ).innerHTML = screen.height;

    gebID( 'window.Width' ).innerHTML = window.innerWidth;
    gebID( 'window.Height' ).innerHTML = window.innerHeight;

    gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
    gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;

    gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
    gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;  
  }

  var table = document.createElement('table');
  table.innerHTML = 
       "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
      +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
      +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
      +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
      +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
  ;

  gebTN("body")[0].appendChild( table );

  table.setAttribute(
     'style',
     "border: 2px solid black !important; position: fixed !important;"
     +"left: 50% !important; top: 0px !important; padding:10px !important;"
     +"width: 150px !important; font-size:18px; !important"
     +"white-space: pre !important; font-family: monospace !important;"
     +"z-index: 9999 !important;background: white !important;"
  );
  setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
  setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");

  table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );

  setInterval( testSizes, 200 );

EDIT: Now styles are applied only to logger table element - not to all tables - also this is a jQuery-free solution :)

Readus

Answer 19

You can use the Screen object to get this.

The following is an example of what it would return:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

To get your screenWidth variable, just use screen.width, same with screenHeight, you would just use screen.height.

To get your window width and height, it would be screen.availWidth or screen.availHeight respectively.

For the pageX and pageY variables, use window.screenX or Y. Note that this is from the VERY LEFT/TOP OF YOUR LEFT/TOP-est SCREEN. So if you have two screens of width 1920 then a window 500px from the left of the right screen would have an X value of 2420 (1920+500). screen.width/height, however, display the CURRENT screen's width or height.

To get the width and height of your page, use jQuery's $(window).height() or $(window).width().

Again using jQuery, use $("html").offset().top and $("html").offset().left for your pageX and pageY values.

Egger

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. – Hypso

Answer 20

here is my solution!

// innerWidth
const screen_viewport_inner = () => {
    let w = window,
        i = `inner`;
    if (!(`innerWidth` in window)) {
        i = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${i}Width`],
        height: w[`${i}Height`]
    }
};


// outerWidth
const screen_viewport_outer = () => {
    let w = window,
        o = `outer`;
    if (!(`outerWidth` in window)) {
        o = `client`;
        w = document.documentElement || document.body;
    }
    return {
        width: w[`${o}Width`],
        height: w[`${o}Height`]
    }
};

// style
const console_color = `
    color: rgba(0,255,0,0.7);
    font-size: 1.5rem;
    border: 1px solid red;
`;



// testing
const test = () => {
    let i_obj = screen_viewport_inner();
    console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
    let o_obj = screen_viewport_outer();
    console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};

// IIFE
(() => {
    test();
})();

Annabal

!screen-ok – Annabal

Answer 21

This how I managed to get the screen width in React JS Project:

If width is equal to 1680 then return 570 else return 200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth

Conflagrant