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

一尘不染

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

javascript

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

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

阅读 266

2022-02-09

一尘不染

您可以使用 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/Height和pageX/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

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

共3个答案