CODEWITHSUNDEEP
javascript
topisani
topisani

Reputation: 405

Find actual screen resolution (not CSS pixels, real screen) with javascript

These days there's a big difference between pixels and points (CSS pixels, DIPS). On my particular computer its the same, but on retina macs and a lot of phones, there's 4 or 8 pixels per point. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

That is, the “pixels” that are used in CSS declarations such as width: 300px or font-size: 14px,have nothing to do with the actual pixel density of the device, or even with the rumoured upcoming intermediate layer. They’re essentially an abstract construct created specifically for us web developers.

I want to get the screen resolution (the real screen resolution, you get it by now), and then serve an image scaled to maximally fill the screen. This means no need to get 2000x2000 pixels images on mobile devices, while still getting good resolutions on a large mac. Hover, when using screen.height it returns CSS pixels not the screen resolution, meaning a retina mac will get an image that is half the size of the screen, resulting in pixelation. Any way to get the actual screen resolution, or the pixels-to-points ratio in javascript?

Upvotes: 1

Views: 1178

Answers (2)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

This will give you the actual screen height, regardless of pixel density which is altered by including the viewport tag...

screen.height * window.devicePixelRatio

Upvotes: 5

Andrey
Andrey

Reputation: 4050

Macs with retina renders pages in 2x scale, and so screen.height returns actual height divided by 2. See answers here

Upvotes: 0

Related Questions