如何在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/