[英]How do I determine the resolution of a computer screen in javascript?
I noticed that the <canvas>
element can have different scales.我注意到
<canvas>
元素可以有不同的比例。 For instance, if I set the CSS width and height to 100px, but have the javascript set the element's width and height to 200px, the element is sized down so everything printed on it is 1/2 the size.例如,如果我将 CSS 的宽度和高度设置为 100 像素,但让 javascript 将元素的宽度和高度设置为 200 像素,则元素的大小会缩小,因此打印在其上的所有内容都是大小的 1/2。 (Or 2x the resolution)
(或分辨率的 2 倍)
I have a retina screen Macbookpro, so in development, I set the scaling to 2x so the images and objects look clear and crisp on my screen.我有一个视网膜屏幕 Macbookpro,因此在开发过程中,我将缩放比例设置为 2 倍,以便图像和对象在我的屏幕上看起来清晰明了。
I have heard that other screens can have a 1.2x resolution (CSS pixels vs Actual pixels)我听说其他屏幕可以有 1.2 倍的分辨率(CSS 像素与实际像素)
Is there a way to find out what the resolution/scaling is of the device's screen so I can make my canvas as crisp and as clean as possible to the user?有没有办法找出设备屏幕的分辨率/缩放比例,这样我就可以让我的画布对用户来说尽可能清晰和干净?
If it helps at all, I'm trying to make a game in javascript using canvas as my graphics output.如果它有帮助,我正在尝试使用画布作为我的图形输出在 javascript 中制作游戏。
After searching around using different terms, I was able to find the answer that I was looking for.在使用不同的术语搜索后,我能够找到我正在寻找的答案。
The window
object has a variable called window.devicePixelRatio
. window
对象有一个名为window.devicePixelRatio
的变量。 This lets us know the ratio of pixels to the device's screen pixels.这让我们知道像素与设备屏幕像素的比率。 On my retina screen, this variable gives me a
2
.在我的视网膜屏幕上,这个变量给了我一个
2
。 With this, I can set the canvas to the correct scaling so it looks clean and crisp on any screen.有了这个,我可以将画布设置为正确的缩放比例,使其在任何屏幕上看起来都干净清晰。
Source: http://www.html5rocks.com/en/tutorials/canvas/hidpi/来源: http : //www.html5rocks.com/en/tutorials/canvas/hidpi/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.