小编典典

获取屏幕、当前网页和浏览器窗口的大小

javascript

我怎样才能得到windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenXscreenY这将在所有主要浏览器中工作?

描述需要哪些值的屏幕截图


阅读 438

收藏
2022-02-09

共3个答案

小编典典

您可以使用 jQuery 获取窗口或文档的大小:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

对于屏幕大小,您可以使用screen对象:

window.screen.height;
window.screen.width;
2022-02-09
小编典典

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

但简而言之:

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

fiddle

以匹配他们的代码格式偏好。还指出,如果您只想针对现代浏览器,则不需要这样做 - 如果是这样,您只需要以下内容:

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

console.log(width, height);
2022-02-09
小编典典

  • 坐标系(0,0)的中心位于视口中(没有条形和主边框的浏览器窗口)左上角和轴指向右下角(在 OP 图片上标记的内容),因此 的值pageX, pageY, screenX, screenY必须为负(如果页面很小,则为零)或不滚动)
  • 对于screenHeight/WidthOP 想要计算屏幕高度/宽度,包括系统菜单栏(例如在 MacOs 中) - 这就是我们不使用的原因.availWidth/Height(不计算它)
  • 对于windowWidth/HeightOP 不想计算滚动条的大小,所以我们使用.clientWidth/Height
  • - 在下面的screenY解决方案中,我们添加到浏览器左上角的位置(window.screenY)它的菜单/tabls/url 栏的高度)。但是,如果下载底部栏出现在浏览器中和/或如果开发人员控制台在页面底部打开,则很难计算该值 - 在这种情况下,该值将在下面的解决方案中增加该栏/控制台高度的大小。可能无法读取条形/控制台高度的值进行校正(没有一些技巧,例如要求用户在测量之前关闭该条/控制台......)
  • pageWidth- 如果 pageWidth 小于 windowWidth,我们需要手动计算<body>子元素的大小以获得该值(我们contentWidth在下面的解决方案中进行示例计算 - 但通常这对于这种情况可能很困难)
  • 为简单起见,我假设<body>margin=0 - 如果不是,那么你应该在计算pageWidth/HeightpageX/Y
function sizes() {
  let contentWidth = [...document.body.children].reduce( 
    (a, el) => Math.max(a, el.getBoundingClientRect().right), 0) 
    - document.body.getBoundingClientRect().x;

  return {
    windowWidth:  document.documentElement.clientWidth,
    windowHeight: document.documentElement.clientHeight,
    pageWidth:    Math.min(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),
  }
}



// TEST

function show() {
  console.log(sizes());
}
body { margin: 0 }
.box { width: 3000px; height: 4000px; background: red; }
<div class="box">
  CAUTION: stackoverflow snippet gives wrong values for screenX-Y, 
  but if you copy this code to your page directly the values will be right<br>
  <button onclick="show()" style="">CALC</button>
</div>

我在 MacOs High Sierra 上的 Chrome 83.0、Safari 13.1、Firefox 77.0 和 Edge 83.0 上对其进行了测试

2022-02-09