如何用javascript确定计算机屏幕的分辨率？

我注意到

元素可以有不同的比例。例如，如果我将CSS的宽度和高度设置为100px，但让javascript将元素的宽度和高度设置为200px，则元素的大小会减小，因此打印在其上的所有内容都是大小的1/2。（或分辨率的2倍）

我有一个视网膜屏幕Macbookpro，所以在开发过程中，我将缩放设置为2倍，以便图像和对象在我的屏幕上看起来清晰清晰

我听说其他屏幕可以有1.2倍的分辨率（CSS像素与实际像素）

有没有办法找出设备屏幕的分辨率/缩放比例是多少，这样我就可以让我的画布对用户来说尽可能清晰和干净

---

如果有帮助的话，我正在尝试使用画布作为图形输出，在javascript中制作一个游戏。

这些属性将给出您的维度：

window.screen.availHeight

window.screen.availWidth

对于像素深度，请使用以下属性：

window.devicePixelRatio

---

对于canvas中的应用程序，提供了一个有用的脚本和解释。

在使用不同的术语进行搜索后，我找到了我正在寻找的答案

window

对象有一个名为

window.devicePixelRatio

的变量。这让我们知道像素与设备屏幕像素的比率。在我的视网膜屏幕上，这个变量给我一个

2

。有了这个，我可以将画布设置为正确的缩放比例，使其在任何屏幕上都看起来干净、清晰

---

来源：

因此，这为我提供了屏幕内可用工作空间的尺寸。但是，这是否告诉我是否需要将画布的分辨率提高一倍？基于此可用性，height只会显示浏览器窗口的大小，并减去不可用的屏幕空间。这可能是我想要的，也可能不是。也许我没有正确地说出我的问题。screen.availHeight和screen.availWidth不是我要找的。我想知道的是“我应该让画布的宽度和高度是CSS中设置的两倍吗？还是让分辨率保持在1到1之间？”。在视网膜屏幕上处理画布时，它们看起来很模糊。我想知道屏幕的分辨率，这样我可以使我的画布在任何屏幕上看起来都不模糊。我不认为有Javascript命令可以提供这些信息。除了像素，还有其他测量类型，其中一种可能就是您所需要的。使用

window.devicePixelRatio

获取像素深度，然后将画布大小乘以该属性。因此，如果深度为2，则将400x600画布解析为800x1200。这将强制在400x600空间中使用2x像素。