javascript - 根据页面缩放级别和 Windows 10 DPI 设置查找 devicePixelRatio

Question

当我要在游戏中进入全屏模式时，我需要将canvas扩展到全屏。我使用 screen.width 和 screen.height 来检测屏幕尺寸。问题是，如果 Windows 10 中的屏幕比例设置未设置为 100%，则 screen.width 会小于实际屏幕尺寸。例如，如果在 Windows 设置中为 150% 缩放，则 screen.width 为 1280，但在页面空间中仍然为 1920 px。

我可以使用 window.devicePixelRatio(在本例中返回 1.5)来校正大小。但页面缩放也会影响 devicePixelRatio 值。

因此，如果页面缩放至 67% 并且 Windows 屏幕缩放比例为 150%，devicePixelRatio 将返回 1.0，但 screen.width 返回 1280。但我需要知道屏幕尺寸是1920的方法。

我正在讨论的 Windows 10 缩放设置:

Answer 1

与与 dpi 功能相关的 Chromium 开发人员交谈后，您能做的最好的事情似乎是:

canvas.width = Math.round(window.screen.width * window.devicePixelRatio / (window.outerWidth / window.innerWidth) / 80) * 80
canvas.height = Math.round(window.screen.height * window.devicePixelRatio / (window.outerWidth / window.innerWidth) / 60) * 60

这适用于 Chrome 和 Firefox。您可能想知道 60 和 80 数字在那里做什么。事实证明，60 是所有常用分辨率的高度的公倍数，而 80 的宽度也具有相同的作用。因此我们可以使用这些值来纠正这些操作期间出现的奇怪小数。

然后，如果 Canvas 处于全屏状态，您还可以执行以下操作:

canvas.style.width = window.innerWidth;
canvas.style.height = window.innerHeight;

这“几乎”完美地工作。就我而言，我注意到对于某些缩放值，canvas.style 值可能太短或太长一个像素。因此，我建议您在使用全屏模式和适当的背景颜色时设置 body.style.overflow = 'hidden'。