根据页面缩放级别和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.style.width = window.innerWidth;
canvas.style.height = window.innerHeight;

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