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

Question

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

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

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

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

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

Answer 1

这些属性将为您提供尺寸：

window.screen.availHeight

window.screen.availWidth

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

window.devicePixelRatio

对于在画布中的应用，这里给出了一个有用的脚本和解释。

Answer 2

在使用不同的术语搜索后，我能够找到我正在寻找的答案。

window对象有一个名为window.devicePixelRatio的变量。 这让我们知道像素与设备屏幕像素的比率。 在我的视网膜屏幕上，这个变量给了我一个2 。 有了这个，我可以将画布设置为正确的缩放比例，使其在任何屏幕上看起来都干净清晰。

来源： http : //www.html5rocks.com/en/tutorials/canvas/hidpi/