随着globalThis在ES2020中的引入，您可以像使用财产一样使用。

对于屏幕大小：

globalThis.screen.availWidth 
globalThis.screen.availHeight

对于窗口大小

globalThis.outerWidth
globalThis.outerHeight

对于偏移：

globalThis.pageXOffset
globalThis.pageYOffset

…等等。

alert（“屏幕宽度：”+globalThis.Screen.avaidWidth+“\n屏幕高度：”+globalThis.Screen.avaidHeight）

我写了一个小javascript bookmarklet，可以用来显示大小。您可以轻松地将其添加到浏览器中，无论何时单击它，您都会在浏览器窗口的右角看到其大小。

在这里您可以找到如何使用bookmarklet的信息https://en.wikipedia.org/wiki/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);

原始代码

原始代码在咖啡中：

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

基本上，代码是在前面添加一个小div，当您调整窗口大小时，它会更新。

这就是我如何在React JS项目中获得屏幕宽度的方法：

如果宽度等于1680，则返回570，否则返回200

var screenWidth = window.screen.availWidth;

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

屏幕有效宽度

随着globalThis在ES2020中的引入，您可以像使用财产一样使用。

对于屏幕大小：

globalThis.screen.availWidth 
globalThis.screen.availHeight

对于窗口大小

globalThis.outerWidth
globalThis.outerHeight

对于偏移：

globalThis.pageXOffset
globalThis.pageYOffset

…等等。

alert（“屏幕宽度：”+globalThis.Screen.avaidWidth+“\n屏幕高度：”+globalThis.Screen.avaidHeight）

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

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上测试了它