检测真实的屏幕分辨率（忽略浏览器缩放等）

Question

我需要使用JavaScript（至少是客户端）获取真实的屏幕分辨率，但在使用浏览器内置缩放时，IE和Firefox都会更改此值，导致问题。

如何以跨浏览器友好的方式解决这个问题？

- vanetten

---

请展示一些代码和示例，说明值如何更改。 - Pekka

Answer 1

function getDimension() {
  var width = 0, height = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    height = window.innerHeight;
    width = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    height = document.documentElement.clientHeight;
    width = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    height = document.body.clientHeight;
    width = document.body.clientWidth;
  }
  window.alert( 'Width = ' + width + 'Height = ' + height);
}

或者（jQuery）

height    = $(window).height();
width    = $(window).width();

- Bosworth99

---

就缩放而言，您可以轻松从document.body.style.zoom（类似于这样的东西）中获取缩放级别，并将其纳入方程式。 - Bosworth99

我怀疑那些值在首次缩放时不会改变，这就是为什么我想先看看OP的代码 - 必须有其他问题。 - Pekka

嗯，我不确定他们是否会在缩放时改变（不过很容易找出来的）。楼主，你有代码吗？ - Bosworth99

应该使用AND &&而不是OR ||吗？||可能会更有效，但如果某些脚本在不支持该功能的浏览器中定义了document.body.clientHeight但未定义document.body.clientWidth，则可能会导致问题。 - Jascha Ehrenreich

我刚意识到，如果在 || 前面加上 ()，那么当第一个条件返回 false 时，整个 or 将被执行，因此并没有效率提升。 - Jascha Ehrenreich