admin管理员组

文章数量:1125924

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

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

• javascript
• html
• jquery
• layout
• cross-browser

Share Improve this question Follow edited Jun 9, 2020 at 9:02 Kamil Kiełczewski 92.1k3434 gold badges394394 silver badges370370 bronze badges asked Aug 9, 2010 at 6:28 turtledoveturtledove 25.9k33 gold badges2424 silver badges2020 bronze badges 6

• 18 pageHeight(on a pic) u can get with: document.body.scrollHeight – befzz Commented Dec 11, 2013 at 20:29
• 3 see https://developer.mozilla.org/en-US/docs/Web/API/Window.screen and http://www.quirksmode.org/dom/w3c_cssom.html#screenview – rawiro Commented May 26, 2014 at 23:06
• Could this be relevant as well? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia – MEM Commented Jul 22, 2014 at 16:18
• 3 Interesting: ryanve.com/lab/dimensions – Déjà vu Commented Jul 31, 2014 at 9:59
• 1 Helpful tutorial -- w3schools.com/jsref/prop_win_innerheight.asp – Uncle Iroh Commented Aug 1, 2016 at 12:55

 |  Show 1 more comment

23 Answers 23

Sorted by: Reset to default 1709

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

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

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;

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

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

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

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

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

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.

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)

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

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)

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.

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.

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's 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):

function getProperties() {
  const { screen, devicePixelRatio } = window
  const screenWidth = screen.width
  const screenHeight = screen.height

  return {
    screenWidth,
    screenHeight,
    realScreenWidth: Math.round(screenWidth * devicePixelRatio),
    realScreenHeight: Math.round(screenHeight * devicePixelRatio)
  }
}

function displayProperties() {
  const { screenWidth, screenHeight, realScreenWidth, realScreenHeight } = getProperties()

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

displayProperties()

window.addEventListener('resize', displayProperties)

Solution

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

class Size {
  static get screenWidth() {
    return Math.round(window.screen.width * window.devicePixelRatio)
  }

  static get screenHeight() {
    return Math.round(window.screen.height * window.devicePixelRatio)
  }

  static get pageWidth() {
    return document.body.clientWidth
  }

  static get pageHeight() {
    return document.body.clientHeight
  }

  static get windowWidth() {
    return window.innerWidth
  }

  static get windowHeight() {
    return window.innerHeight
  }
}

function displaySize() {
  console.clear()
  console.log({
    screenWidth: Size.screenWidth,
    screenHeight: Size.screenHeight,
    pageWidth: Size.pageWidth,
    pageHeight: Size.pageHeight,
    windowWidth: Size.windowWidth,
    windowHeight: Size.windowHeight
  })
}

displaySize()

window.addEventListener('resize', displaySize)

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.

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

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

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.

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

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

Today it's possible to do this without JavaScript and use CSS with the registered @property and trigonometric functions. See more at https://css-tip.com/screen-dimension/.

@property --_w {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w), 1px)); /* screen width */
  --h: tan(atan2(var(--_h), 1px)); /* screen height*/
  /* The result is an integer without unit  */
}

And now for something completely different...

Okay, I took a slight detour on this, so bear with me. I took some existing code I used for a project where I needed to see the screen info constantly as I was working on it, so I came up with an unobtrusive solution that would stay out of the way until I needed it. I merged that with @"Kamil Kiełczewski"'s answer above. If you want to use it in a project you just need the JS portion of the snippet, which I recommend turning into a separate JS file.

(function () {
  try {
    function collapseExpand(getID, fadeOff = "") {
      if (
        document.getElementById(getID) &&
        document.querySelector(`.${getID}`)
      ) {
        let ele = document.querySelector(`.${getID}`);
        let theID = document.getElementById(getID);
        if (
          ele.style.display === "none" ||
          ele.style.display === undefined ||
          ele.classList.contains("none")
        ) {
          if (fadeOff !== "") {
            ele.style.display = "block";
          } else {
            fadeIn(ele);
          }
          theID.classList.replace("roundAll", "roundTop");
          theID.setAttribute("title", "Click to contract");
        } else {
          if (fadeOff !== "") {
            ele.style.display = "none";
          } else {
            fadeOut(ele);
          }
          theID.classList.replace("roundTop", "roundAll");
          theID.setAttribute("title", "Click to expand");
        }
      }
    }

    function setCollapseExpand(getID, state = "hidden") {
      if (
        document.getElementById(getID) &&
        document.querySelector(`.${getID}`)
      ) {
        let theID = document.getElementById(getID);
        let theQS = document.querySelector(`.${getID}`);
        theID.classList.add("expandO");
        theID.classList.add("roundAll");
        theQS.classList.add("expand-contract");
        theID.setAttribute("title", "Click to contract");
        if (state === "hidden") {
          theID.classList.replace("roundTop", "roundAll");
          document.querySelector(`.${getID}`).style.display = "none";
          theID.setAttribute("title", "Click to expand");
        }
        theID.addEventListener("click", function (e) {
          collapseExpand(e.target.id);
        });
      }
    }

    function fadeOut(_target) {
      let el = _target;
      el.style.opacity = 1;

      (function fade() {
        if ((el.style.opacity -= 0.02) < 0) {
          el.style.display = "none";
        } else {
          requestAnimationFrame(fade);
        }
      })();
    }

    function fadeIn(_target, display) {
      let el = _target;
      el.style.opacity = 0;
      el.style.display = display || "block";

      (function fade() {
        var val = parseFloat(el.style.opacity);
        if (!((val += 0.02) > 1)) {
          el.style.opacity = val;
          requestAnimationFrame(fade);
        }
      })();
    }

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

      document.querySelector(".windowWidth").innerHTML =
        "windowWidth = " + document.documentElement.clientWidth.toFixed(0);
      document.querySelector(".windowHeight").innerHTML =
        "windowHeight = " + document.documentElement.clientHeight.toFixed(0);
      document.querySelector(".pageWidth").innerHTML =
        "pageWidth = " +
        Math.min(document.body.scrollWidth, contentWidth).toFixed(0);
      document.querySelector(".pageHeight").innerHTML =
        "pageHeight = " + document.body.scrollHeight.toFixed(0);
      document.querySelector(".screenWidth").innerHTML =
        "screenWidth = " + window.screen.width.toFixed(0);
      document.querySelector(".screenHeight").innerHTML =
        "screenHeight = " + window.screen.height.toFixed(0);
      document.querySelector(".pageX").innerHTML =
        "pageX = " + document.body.getBoundingClientRect().x.toFixed(0);
      document.querySelector(".pageY").innerHTML =
        "pageY = " + document.body.getBoundingClientRect().y.toFixed(0);
      document.querySelector(".screenX").innerHTML =
        "screenX = " + -window.screenX.toFixed(0);
      document.querySelector(".screenY").innerHTML =
        "screenY = " +
        (-window.screenY - (window.outerHeight - window.innerHeight)).toFixed(
          0
        );
    }
    window.onload = sizes;
    window.onresize = sizes;

    const font_widget_style = `
    html { scroll-behavior: smooth;}/* smooth-scroll CSS */
    :root {
      --main-font: sans-serif;
      --main-bdrs: 0.5rem;
      --expando-dark: #aaa;
      --expando-light: #ccc;
      --expando-font: sans-serif;
      --expando-dark-text: #eee;
      --expando-light-text: #444;
      --hidden-background: rgba(250, 250, 250, 0.95);
      --hidden-background-border: 2px solid rgba(200, 200, 200, 0.95);
    }
    * {
      box-sizing: border-box;
    }
    .expand-contract {
      background: var(--hidden-background);
      border-radius: 0 0 0.5rem 0.5rem;
      border: var(--hidden-background-border);
      padding: 0.25rem;
      margin: 0 auto;
      margin-bottom: 0.25rem;
      width: calc(100vw - 25px);
      font-family: sans-serif;
    }

    .expandO {
      text-align: center;
      width: 160px;
      font-family: var(--main-font);
      font-size: 0.8rem;
      margin: 0 auto;
      color: #555;
      /* background: #eee; */
      border: 1px solid #ccc;
      padding: 0.25rem 0;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
      font-weight: bold;
      text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);
      cursor: pointer;
    }
    .roundTop {
      border-radius: var(--main-bdrs) var(--main-bdrs) 0 0;
    }
    .roundAll {
      border-radius: var(--main-bdrs);
      margin-bottom: 0.2rem;
    }

    .no-select {
      user-select: none;
      /* -moz-user-select: none;
      -webkit-user-select: none; */
    }
    .expando.roundTop,
    .roundTop {
      background: var(--expando-dark);
      color: var(--expando-dark-text)
    }
    .expando.roundAll,
    .roundAll {
      background: var(--expando-light);
      color: var(--expando-light-text)
    }

      aside.show-window-size-details {
      opacity: 0.1;
      width: 160px;
      margin: 0 auto;
      padding: 0.1rem;
      font-size: 0.8rem;
      font-family: sans-serif;
      text-align: center;
      transition: 0.5s opacity;
    }
    aside.show-window-size-details:hover {
      opacity: 1;
      transition: 1s opacity;
    }
    aside.show-window-size-details h3 {
      margin: 2px;
      font-size: 0.85rem;
      font-family: sans-serif;
      font-weight: normal;
      text-shadow: 0.5px 0.5px #333;
      text-align: center;
      cursor: pointer;
    }
    div.window-size-properties {
      font-family: sans-serif;
      width: 160px;
      margin: 0 auto;
      font-size: 0.8rem;
    }`;
    const font_widget_style_tag = document.createElement("style");
    font_widget_style_tag.innerHTML = font_widget_style;
    document.head.appendChild(font_widget_style_tag);

    let size_aside = document.createElement("aside");
    size_aside.setAttribute("class", "show-window-size-details");
    size_aside.innerHTML = `
      <h3 title="click to expand/contract" id="window-size-properties">window size details</h3>
      <div class="window-size-properties">
        <div title="document.documentElement.clientWidth" class="windowWidth"></div>
        <div title="document.documentElement.clientHeight" class="windowHeight"></div>
        <div title="document.body.scrollWidth" class="pageWidth"></div>
        <div title="document.body.scrollHeight" class="pageHeight"></div>
        <div title="window.screen.width" class="screenWidth"></div>
        <div title="window.screen.height" class="screenHeight"></div>
        <div title="document.body.getBoundingClientRect().x" class="pageX"></div>
        <div title="document.body.getBoundingClientRect().y" class="pageY"></div>
        <div title="window.screenX" class="screenX"></div>
        <div title="(-window.screenY - (window.outerHeight-window.innerHeight)" class="screenY"></div>    
      </div>`;
    const _body = document.querySelector("body");
    _body.insertAdjacentElement("beforeend", size_aside);
    setCollapseExpand("window-size-properties");
  } catch (e) {
    console.error(e);
  }
})();

body {
  font-family: sans-serif;
  text-align: center;
}

To see the widget, hover over the middle of the screen just below this sentence.

本文标签：