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


当前回答

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

其他回答

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

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

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

我写了一个小javascript bookmarklet,可以用来显示大小。您可以轻松地将其添加到浏览器中,无论何时单击它,您都会在浏览器窗口的右角看到其大小。

在这里您可以找到如何使用bookmarklet的信息https://en.wikipedia.org/wiki/Bookmarklet

小书签

javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

原始代码

原始代码在咖啡中:

(->
  addWindowSize = ()->
    style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
    $windowSize = $('<div style="' + style + '"></div>')

    getWindowSize = ->
      '<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'

    $windowSize.html getWindowSize()
    $('body').prepend $windowSize
    $(window).resize ->
      $windowSize.html getWindowSize()
      return

  if !($ = window.jQuery)
    # typeof jQuery=='undefined' works too
    script = document.createElement('script')
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
    script.onload = addWindowSize
    document.body.appendChild script
  else
    $ = window.jQuery
    addWindowSize()
)()

基本上,代码是在前面添加一个小div,当您调整窗口大小时,它会更新。

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