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

当我在游戏中进入全屏模式时，我需要将

画布

扩展到全屏。 我使用

screen.width

和

screen.height

来检测屏幕大小。 问题是，如果Windows 10中的屏幕比例设置未设置为100%，

screen.width

小于实际屏幕大小。例如，如果在Windows设置中为150%缩放，屏幕宽度为1280，但在页面空间中仍为1920 px

我可以使用

window.devicePixelRatio

，在本例中返回1.5，用于更正大小。但是页面缩放也会影响

devicePixelRatio

值

因此，如果页面缩放到67%，Windows屏幕缩放为150%，

devicePixelRatio

将返回1.0，但

screen.width

将返回1280。但我需要知道屏幕大小是1920

我所说的Windows 10缩放设置：

---

在与Chromium开发人员讨论了dpi功能后，您似乎可以做的最好的事情是：

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.style.width = window.innerWidth;
canvas.style.height = window.innerHeight;

---

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

Firefox中的行为不同，缩放不会影响devicePixelRatio。但是，在Chrome中，这是一个我也不知道如何解决的问题。