有时您需要在调整窗口大小和内部内容时查看宽度/高度的变化。

为此，我编写了一个小脚本，它添加了一个日志框，动态地监视所有的大小调整和几乎立即的更新。

它添加了一个具有固定位置和高z索引的有效HTML，但足够小，因此您可以：

在实际现场使用用于测试移动/响应意见

已在：Chrome 40、IE11上测试，但也很有可能在其他/较旧的浏览器上工作…：）

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

编辑：现在样式只应用于记录器表元素，而不是应用于所有表-这也是一个jQuery免费解决方案：）

这里是一个纯JavaScript的跨浏览器解决方案（源代码）：

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

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

您还可以获得窗口的宽度和高度，避免浏览器工具栏和其他东西。这是浏览器窗口中的真正可用区域。

为此，请使用：window.innerWidth和window.inerHeight财产（请参阅w3schools上的文档）。

在大多数情况下，这将是最好的方式，例如，显示一个完全居中的浮动模式对话框。它允许您计算窗口上的位置，无论使用浏览器的分辨率方向或窗口大小如何。

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

与屏幕尺寸相关的完整指南

JavaScript

高度：

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

注意：当窗口最大化时，这将等于screen.availHeight

宽度：

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)

滑动分页

高度：

$(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.                         

宽度：

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

参考：https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

2020年全年

我很惊讶这个问题有大约10年的时间，而且到目前为止似乎还没有人给出完整的答案（有10个值）。所以我仔细分析了OP问题（尤其是图片），并发表了一些评论

坐标系（0,0）的中心位于视口（浏览器窗口，没有条和主边框）的左上角，轴指向右下（OP图片上标记的内容），因此pageX、pageY、screenX、screenY的值必须为负值（如果页面较小或未滚动，则为零）对于screenHeight/Width，OP希望计算屏幕高度/宽度，包括系统菜单栏（例如，在MacOs中）-这就是为什么我们不使用.avaidWidth/height（不计算）的原因对于windowWidth/Height，OP不想计算滚动条的大小，所以我们使用.clientWidth/Heith在下面的解决方案中，我们将screenY添加到浏览器左上角的位置（window.screenY），即其菜单/表格/url栏的高度）。但如果下载底部栏出现在浏览器中和/或开发人员控制台在页面底部打开，则很难计算该值——在这种情况下，该值将随着下面的解决方案中该栏/控制台高度的大小而增加。可能不可能读取杆/控制台高度值以进行校正（没有一些技巧，如在测量之前要求用户关闭杆/控制台…）pageWidth-在pageWidth小于windowWidth的情况下，我们需要手动计算＜body＞子元素的大小以获得该值（我们在下面的解决方案中的contentWidth中进行了示例计算-但通常情况下这可能很困难）为了简单起见，我假设＜body＞margin＝0-如果不是，那么在计算pageWidth/Height和pageX/Y时应该考虑这个值

函数大小（）{constcontentWidth=[…document.body.childred].reduce（（a，el）=>数学最大值（a，el.getBoundingClientRect（）.right），0）-document.body.getBoundingClientRect（）.x；返回{windowWidth:document.documentElement.clientWidth，windowHeight:document.documentElement.clientHeight，pageWidth:数学最小值（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），}}//测试函数show（）{console.log（sizes（））；}正文｛边距：0｝.box{width:3000px；height:4000px；background:red；}<div class=“box”>警告：stackoverflow片段给出了错误的screenX-Y值，但如果您将此代码直接复制到页面，则值将正确<br><button onclick=“show（）”style=“”>CALC</button></div>

我在Mac OS High Sierra上的Chrome 83.0、Safari 13.1、Firefox 77.0和Edge 83.0上测试了它