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


当前回答

这有您需要知道的一切:获取视口/窗口大小

但简而言之:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

不停摆弄

请停止编辑此答案。它已经被不同的人编辑了22次,以符合他们的代码格式偏好。也有人指出,如果你只想瞄准现代浏览器,这是不需要的——如果是的话,你只需要以下内容:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

其他回答

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

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

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

window.innerWidth, window.innerHeight

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

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

您可以使用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;