您可以使用jQuery获取窗口或文档的大小：

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

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

对于屏幕大小，可以使用屏幕对象：

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

您可以使用Screen对象获取此信息。

以下是它将返回的内容的示例：

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

要获得screenWidth变量，只需使用screen.width，与screenHeight相同，只需选择screen.height。

要获取窗口宽度和高度，请分别为screen.availWidth或screen.avail height。

对于pageX和pageY变量，请使用window.screenX或Y。请注意，这是从非常左/最左/最上的屏幕开始的。因此，如果您有两个宽度为1920的屏幕，那么右屏幕左侧500px的窗口的X值将为2420（1920+500）。然而，screen.width/height显示当前屏幕的宽度或高度。

要获取页面的宽度和高度，请使用jQuery的$（window）.height（）或$（window）.width（）。

再次使用jQuery，为pageX和pageY值使用$（“html”）.offset（）.top和$（“html”）.ooffset（）.left。

这是我的解决方案！

//内部宽度常量screen_viewport_inner=（）=>{设w＝窗口，i=“内部”；if（！（窗口中的`innerWidth`））{i=“客户端”；w=document.documentElement | | document.body；}返回{width:w[`${i}宽度`]，高度：w[`${i}高度`]}};//外侧宽度常量screen_viewport_outer=（）=>{设w＝窗口，o=“外部”；if（！（窗口中的`outerWidth`））{o=“客户端”；w=document.documentElement | | document.body；}返回{width:w[`${o}宽度`]，高度：w[`${o}高度`]}};//样式常量console_color=`颜色：rgba（0255,0,0.7）；字体大小：1.5rem；边框：1px纯红色；`;//测试常量测试=（）=>{让i_obj=screen_viewport_inner（）；console.log（`%c screen_viewport_inner=\n`，console_color，JSON.stringfy（i_obj，null，4））；让o_obj=screen_viewport_out（）；console.log（`%c screen_viewport_outer=\n`，console_color，JSON.stringify（o_obj，null，4））；};//生命(() => {测试（）；})();

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

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

它添加了一个具有固定位置和高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免费解决方案：）

这就是我如何在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）