The first in a series, this blog will delve deeper into some of our device detection properties. First up, we have PixelRatio.
As leaders in the device detection industry, we always keep up to date with the latest requirements. The impressive work carried out by our Data Team has firmly placed us at the top of the industry.
This blog is the first of a two-part series. We will be discussing some of the device detection properties that are essential strings in our real-time data services bow. Let's talk about window.devicePixelRatio.
The first property: window.devicePixelRatio
window.devicePixelRatio (or PixelRatio for short) is a property that can be used to tell the browser how many of a device screen’s physical pixels should be used to draw a single CSS pixel. It’s useful when displaying content with different resolutions, such as rendering on a standard display verses a Retina display, which uses more screen pixels to create a sharper image.
A window.devicePixelRatio of 1 can look blurry in comparison to a crisp window.devicePixelRatio of 2. As a website owner, you don’t want to waste bandwidth on super-detailed images that are sent to a TV with a PixelRatio less than 1. And as a viewer, those extra pixels can really make a difference to the clarity of the display.
Any device that we use to consume web content – think a smartphone, tablet, desktop computer or smart TV – will need to automatically resize its content for your ultimate viewing pleasure.
At 51Degrees, we routinely update our database with new devices and their PixelRatio values. Thanks to our Data Team’s diligence, we have calculated 94% of smartphones with a matching PixelRatio in our database (and 93% of tablets, and 91% of TVs...). But what about the PixelRatio values not on our database? To answer that, we need to explain how we source the PixelRatio value.
How do you work out window.devicePixelRatio?
There are three methods we use to calculate window.devicePixelRatio.
Firstly, we can use JavaScript code that monitors the device resolution. If the JavaScript detects a change in the PixelRatio value, it will automatically update. For example, if the user drags a window to a different device such as a second screen, the PixelRatio value may change. If we can receive a value via this method, this is preferred. However, if the JavaScript does not return a value, we turn to research.
Our Data Team put on their detective hats and look for other PixelRatio sources. For more popular devices, it can be easier to find their PixelRatio values online, which we then can use within our database.
And finally, if the aforementioned methods do not return a value, we can calculate an approximation of the PixelRatio value between 0 and 4. At 51Degrees, we like to truncate this value to two decimal places. For more popular devices, details such as screen dimensions and pixel count may be published online. Alternatively, we may run tests on the physical device to return the values we need to calculate PixelRatio.
For example, let’s say you’ve just bought an iPhone 11 Pro Max. Using our calculation, we can work out that the PixelRatio is 3.03 to two decimal places. When we compare that to other researched sources which specify the PixelRatio for this device as 3, we are confident that our calculation is correct!
Let’s go back to the 6% of smartphone devices on our database which don't have a PixelRatio value. If the JavaScript property doesn’t work and we can’t find any values through research, we use the calculation. However, sometimes the calculation can’t be completed due to missing values such as the screen dimensions. But rest assured, our Data Team are always keeping an eye out for new opportunities to reach 100% on our PixelRatio database!
Harness the power of our PixelRatio database for yourself and contact us for a free trial of our version 4 solutions.
That concludes part one of our blog series. Continue the flow and read more on our second device detection property: video player support.