如何获取windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY,这些都可以在所有主要浏览器中使用?


当前回答

获取可用屏幕维度的非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任务栏等)。

其他回答

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

我开发了一个库来了解桌面和移动浏览器的真实视口大小,因为不同设备的视口大小不一致,无法依赖该帖子的所有答案(根据我对此所做的所有研究):https://github.com/pyrsmk/W

在某些情况下,与响应布局相关的$(document).height()可能会返回错误的数据,仅显示视图端口高度。例如,当某个div#wrapper的高度为100%时,该#wrappers可以被其内部的某个块拉伸。但它的高度仍将与视口高度相同。在这种情况下,您可以使用

$('#wrapper').get(0).scrollHeight

表示包装器的实际大小。

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