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

【问题标题】：Find devicePixelRatio according to both page zoom level and Windows 10 DPI settings根据页面缩放级别和 Windows 10 DPI 设置查找 devicePixelRatio
【发布时间】：2019-04-25 07:00:19
【问题描述】：

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

我可以使用window.devicePixelRatio（在这种情况下返回 1.5）来校正大小。但是页面缩放也会影响devicePixelRatio的值。

所以，如果页面缩放到 67% 并且 Windows 屏幕缩放为 150%，devicePixelRatio 将返回 1.0，但 screen.width 返回 1280。但我需要知道屏幕大小为 1920 的方法。

我说的 Windows 10 缩放设置：

【问题讨论】：

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

标签： javascript windows windows-10

【解决方案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'。

【讨论】：