独立于页面缩放级别和Windows比例设置检测屏幕分辨率。

Question

我需要检测屏幕分辨率。问题是，如果Windows 10的缩放设置不是100%，它会影响screen.width/screen.height的值。

我可以使用pixelDeviceRatio来进行正确的调整，但这里还有另一个问题：如果页面被缩放了，它也会影响pixelDeviceRatio。

例如，我的Windows缩放设置为150%，页面缩放为67%。我的屏幕分辨率是1920x1080。在这种情况下，screen.width是1280，pixelDeviceRatio是1.0（因为Windows缩放和页面缩放水平互相抵消）。如何检测真实的屏幕分辨率？

更新：我正在开发HTML5游戏。当进入全屏模式时，我需要将其调整为实际的屏幕分辨率。

更新2：我有一个<canvas>元素，并调用它的requestFullscreen方法切换到全屏模式。然后我必须设置画布的宽度和高度。如果我设置它小于实际屏幕分辨率（例如1280而不是1920），则会出现画布周围的空白边距。

- Petr K.

---

为什么你想要检测屏幕分辨率？你试图解决什么问题？ - undefined

@ADyson，上面已经回答了。 - undefined

你的更新没有清楚地说明为什么你“需要将其调整为实际屏幕分辨率”。为什么不能只调整为“报告的”大小呢？而且，在两个插值算法同时工作的如此复杂的情况下，你认为渲染“精确的屏幕尺寸 x 某个比例 x 另一个比例”会有好处吗？很有可能最终会导致像素混乱。此外，如果你的用户有这样的设置，他们可能有充分的理由，并且你可能应该尊重他们试图反对这些设置的行为。 - undefined

@Kaiido 我在上次更新中尝试解释了一下（对我的英语表示抱歉） - undefined

我不知道为什么有些人在不理解问题的情况下给出负面评价... 这个问题是合理的，并且值得给予+1票支持。 - undefined

Answer 1

这是一个 XY 问题，OP 不想要屏幕分辨率，而是文档的分辨率。

---

将来的读者注意：

如果您也试图获取实际屏幕分辨率，您可能自己陷入了某种XY问题。

如果您想要锐利的像素，获取实际屏幕分辨率并没有太大帮助。

以OP的浏览器缩放为75%并在操作系统缩放为150%的情况下为例，我们得到一个单独的白色像素，

1个白色像素x 0.75 =>无法呈现=>使用周围像素进行反锯齿处理。因此，如果我们说周围像素是黑色的，那么我们现在就有了一个灰色的像素。

而且这仅仅是在浏览器级别上......我们仍然需要通过操作系统缩放算法。

1个灰色像素x 1.5 =>无法呈现=>使用周围像素进行反锯齿处理。然后是一个新的像素，离我们最初的白色像素更远了。

---

最好的做法是将我们的画布位图大小设置为浏览器报告的大小。这样，只有操作系统缩放会启动。

注意：您可能想尝试检测高密度屏幕，即所谓的Retina®屏幕，它们实际上能够以子像素级别渲染像素，在这种情况下，您可以尝试使用window.devicePixelRatio作为通用缩放因子，但请记住四舍五入，因为浮点比例意味着更多的抗锯齿（没有高密度屏幕将使用2.3个像素来渲染一个像素）。

因此，要检测此文档大小，有多种不同的方法可以实现：

如果您在窗口模式下处理硬编码大小，可以在进入全屏模式时简单地检查window.innerWidth和window.innerHeight：

很遗憾，StackSnippets® iframe不允许全屏模式...

// listen for the resize event
window.onresize = function() {
  // if we are in fullscreen mode
  if (document.fullscreenElement === canvas) {
    // simply size our canvas to the reported innerWidth/innerHeight.
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  draw();
}
// in the fulscreenchange event
document.onfullscreenchange = function() {
    // if we are exiting the fullscreen mode
    if (!document.fullscreenElement) {
      // set  back to hard-coded values
      W = canvas.width = 500
      H = canvas.height = 200;
    }
    draw();
  }

小提琴

如果您想要更具动态性的内容，您也可以使用CSS来让您知道实际大小。事实上，只要记得将其位图大小设置为显示大小，您就可以通过CSS调整画布大小。

// listen only for the resize event
window.onresize = function() {
  // set the canvas size to its own rendered size
  W = canvas.width = canvas.offsetWidth;
  H = canvas.height = canvas.offsetHeight;
  draw();
}

/* target only when in fullscreen mode */
canvas::fullscreen {
  width: 100vw;
  height: 100vh;
}
/* windowed mode */
canvas {
  width: 50vw;
  height: 50vh;
}

小提琴。

- Kaiido

---

我完全忘记了CSS中的vw/vh和:fullscreen。非常感谢，这对我非常有帮助。 - undefined

Answer 2

你可以尝试这个：

var width = screen.width
var height = screen.height
width = width*window.devicePixelRatio;
height = height*window.devicePixelRatio;

alert("width : "+width);
alert("height : "+height);

- Steve

---

很抱歉，如果在Windows中将缩放设置为非100%，devicePixelRatio将无法反映页面的缩放级别。谢谢。 - undefined

你想要做什么？是检测屏幕分辨率还是页面缩放级别？ - undefined

我正在尝试检测屏幕分辨率。但是如果我知道页面缩放级别，我也可以计算出分辨率。由于Windows的缩放设置和页面缩放级别都会影响devicePixelRatio的值，但只有Windows的缩放设置会影响screen.width的值，所以如果我知道页面缩放级别，我就能找到它。 - undefined

我认为我给出的答案独立于屏幕缩放，可以获得屏幕宽度和屏幕高度。 - undefined

是的，但在Windows 10中，它并不独立于屏幕缩放设置。 - undefined

你是对的... 但我不认为你试图使用JavaScript做的事情是可能的... 这是我的观点 - undefined

Answer 3

目前没有JavaScript API可以检测操作系统的缩放因子。

- GAME DEV