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

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

var screenWidth = window.screen.availWidth;

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

屏幕有效宽度

获取可用屏幕维度的非jQuery方法。window.screen.width/height已经发布，但为了响应Web设计和完整性，我认为值得提及这些属性：

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

availWidth和availHeight-屏幕（不包括OS任务栏等）。

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

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

它添加了一个具有固定位置和高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;

但是当我们谈论响应屏幕时，如果出于某种原因我们想使用jQuery处理它，

window.innerWidth, window.innerHeight

给出正确的测量值。即使它删除了滚动条的额外空间，我们也不必担心调整空间：）

如果您需要一个真正防弹的文档宽度和高度解决方案（图片中的pageWidth和pageHeight），您可能需要考虑使用我的插件jQuery.documentSize。

它只有一个目的：即使在jQuery和其他方法失败的情况下，也始终返回正确的文档大小。尽管有jQuery的名字，但您不必使用它——它是用普通的Javascript编写的，也可以在没有jQuery的情况下使用。

用法：

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

用于全局文档。对于其他文档，例如在您有权访问的嵌入式iframe中，将文档作为参数传递：

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

更新：现在也更新窗口尺寸

从1.1.0版开始，jQuery.documentSize还处理窗口维度。

这是必要的，因为

$（window）.height（）在iOS中有缺陷，以至于没有用$（window）.width（）和$（window）.height（）在移动设备上不可靠，因为它们无法处理移动缩放的效果。

jQuery.documentSize提供了$.windowWidth（）和$.windowHeight（）来解决这些问题。有关更多信息，请查看文档。