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），则画布周围会出现空白。

Answer 1

当前没有可用于检测操作系统比例因子的JavaScript API。因为我也找了太多次了，找不到了。

Answer 2

您可以尝试以下方法：

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

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

希望我的回答有帮助！

Answer 3

这是XY problem，OP不需要 screen 分辨率，而是文档之一。

给以后的读者的注释。
如果您还试图获得实际的屏幕分辨率，则可能会遇到XY问题。

如果您想要的是锐利像素，那么获得实际的屏幕分辨率将无济于事。

以OP的浏览器缩放比例为75％（由操作系统缩放为150％）为例，我们得到一个白色像素，

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

这仅在浏览器级别...我们仍然必须通过OS缩放算法。

1个灰色像素x 1.5 =>无法渲染=>对周围像素进行抗锯齿。但是又有了新的像素，甚至比我们原来的白色还要远。

我们在这里能做的最好的事情就是将画布位图的大小设置为浏览器报告的大小。这样，只有操作系统缩放才会起作用。

注意：您可能想尝试检测又称为retina®的高密度屏幕，在这种情况下，它们实际上能够渲染像素级以下的像素。您可以尝试使用 window.devicePixelRatio 作为常规缩放比例，但请记住将其取整，因为浮动比例将意味着更多的抗锯齿（任何高密度屏幕都不会使用2.3像素来渲染一个px）。

要检测此文档的大小是一项容易的任务，它有多种不同的处理方式：

如果您以窗口模式处理硬编码尺寸，则在进入全屏模式时只需检查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();
  }

Fiddle。

如果您想要更多动态的东西，还可以使用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;
}

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

3 个答案:

Fiddle。

Fiddle。