Assuming window.devicePixelRatio and device-width are set by display manufacturers and could potentially return incorrect values, are there any other reliable ways to accurately calculate the resolution of the physical pixels on a display?
I'll use my phone (Samsung Galaxy S9+) as an example, in portrait it has:
a screen resolution of: 1,440 × 2,960
a device-width of: 412
a devicePixelRatio of 3.5
The width of the device in physical pixels can be calculated by: device-width * devicePixelRatio
412 * 3.5 ≠ 1440
I'm willing to believe any one of those values is wrong. Perhaps the width in physical pixels really is 1442, or maybe the device-width is actually 411.42857142857142857142857142857, or the devicePixelRatio is 3.4951456310679611650485436893204.
Either way something's not right, and I'm left wondering how often this inaccuracy occurs and if there's any way to work around the issue without having to fallback on a database of manually updated known device resolutions.
Related
Context: I'm using window.devicePixelRatio to determine the display resolution for a few canvases on a website.
To the best of my knowledge, the DPR value should change when zooming in and out on a website. This is what happens on Chrome. But it doesn't seem to happen in Safari. Querying the value of window.devicePixelRatio or devicePixelRatio from the JS Console always returns the same value, no matter how much I zoom in or out. I've tried this on three separate computers, all of them Macs running either Safari v13.1.2, v14.1.2, or v15.1.
The MDN Web Docs page on Window.devicePixelRatio implies that the DPR should change on zoom, both in its definition at the top and in its example code. The spec linked by MDN says the following (bolded emphasis mine):
The devicePixelRatio attribute must return the result of the following determine the device pixel ratio algorithm: If there is no output device, return 1 and abort these steps. Let CSS pixel size be the size of a CSS pixel at the current page zoom scale factor and at a pinch zoom scale factor of 1.0. Let device pixel size be the vertical size of a device pixel of the output device. Return the result of dividing CSS pixel size by device pixel size.
Should Safari's window.devicePixelRatio be changing on zoom? If the DPR doesn't change with zooming, is there a different way to determine a good canvas display resolution on Safari?
This is my first question on StackOverflow so please let me know if anything can be improved.
I just noticed that my screen resolution is not right detected.
If I use THIS and THIS I get a resolution of 1280 x 720.
But if I look in my Windows options I have a resolution of 1920 x 1080.
So I set my resolution (in Windows) to 800 x 600 and checked it again in the links above. Now both are showing 800 x 600 too.
My questions:
Why is my higher resolution not detected by js/css?
I made a little "table" with the different resoutions (right windows/ left js,css):
It looks like the proportion between both values are the same for every pair.
EDIT: Thanks to Schlaus, I tried it with different queries und colors. And css is also detecting just up to 1280 x 720 and not higher.
The problem was the scaling in Windows 10.
It was set to 150%.
After changing it to 100% everything was displayed correctly.
On desktop -> right click -> display settings
I am developing a web site and want see how it works on Google Pixel and Google Pixel XL devices. As I don't have the access to those devices, I need to know the view port width, height and device-pixel-ratio of those devices.
I have tried searching on Google but still couldn't find anything useful. Latest Chrome also doesn't list those devices' sizes in developer tools.
It will be really helpful if anyone have the access to these devices can figure the required information out.
Both the Pixel and Pixel XL are listed to have a css pixel resolution of 411×731, with device-pixel-ratios of 2.6 and 3.5 respectively.
Source: https://material.io/devices/ which is a Google site.
That's odd though, considering most phones get more effective pixels as the screen size increases, rather than just blowing everything up bigger and getting a higher dppx (Dots Per Pixel).
That does jive with Lord Flash's screen capture from the smaller Pixel; but doesn't help to validate the Pixel XL. If someone could post a screen capture from the Pixel XL I could determine the scaling from that.
The normal Pixel has a Resolution of 1080 x 1920 pixels (~441 ppi pixel density)
The Pixel XL has a resolution of: 1440 x 2560 pixels
Here is also a screenshot of the normal one. Feel free to measure whatever aspect you want:
do you have the google pixel in hand?
load the page with JS code
var viewport = {
width : $(window).width(),
height : $(window).height()
};
alert(viewport.height);
alert(viewport.width);
I have a data table that displays 12 rows in a smaller screen. The resolution of screen is 1280x1024. I have to display more rows, say 20, in a device with larger physical screen but with same resolution as of smaller device.
How to go about it?
if really you mean same pixel resolution but different physical size, then answer is you cant (at least not at desktops)
there is some not reliable workaround for phones
Getting the physical screen dimensions / dpi / pixel density in Chrome on Android
If I understand your question correctly, I think CSS Media queries is probably your best bet.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I have a website that needs to distinguish between mobile phones, tablets, and ordinary laptops. Normally I could use an asp.net function to tell, but the complication is that I want tablets to be treated as NOT being mobile devices. Any device with a screen diagonal greater than 7.5 inches would get the normal website, and any device with a screen dialog of less than this would get the mobile version of the site.
First I thought all I need to do is get the screen.width (I'm using JavaScript) and screen.height, apply the pythagorean theorem to get the length of the diagonal (in pixels) and then divide by pixels-per-inch.
The issue is this: Is "pixels-per-inch" always 96 for every type of device?
If not, I can't do this.
Thanks.
How do I know how many physical inches a device screen has?
You can't.
Is "pixels-per-inch" always 96 for every type of device?
No, not remotely. Not only do you have the issue of Retina displays, but if I have a notebook computer with a screen resolution of 1280x768, if the screen is 15.1" it's going to have a lower PPI than if the screen is 10.1".