这是我的解决方案！

//内部宽度常量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））；};//生命(() => {测试（）；})();

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

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

var screenWidth = window.screen.availWidth;

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

屏幕有效宽度

如果您需要一个真正防弹的文档宽度和高度解决方案（图片中的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（）来解决这些问题。有关更多信息，请查看文档。

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

为此，请使用：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>');

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

对于屏幕大小：

globalThis.screen.availWidth 
globalThis.screen.availHeight

对于窗口大小

globalThis.outerWidth
globalThis.outerHeight

对于偏移：

globalThis.pageXOffset
globalThis.pageYOffset

…等等。

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