Responsive Design
I'm trying to interpret between these few variables here and just trying to make sure I understand them:
https://viewportsizer.com/devices/
So because some screens have high dpi or ppi, that's why CSS width/height comes in (I'm looking at a list for mobile devices)
How is the pixel ratio decided? On https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag I'm inclined to believe it's the dpi/150 and then integer floored, however this usually isn't true. (Although, it on the website there ways ppi, so i would need to know if dip and ppi are the same or not.)
The pixel ratio would then be the physical width / css width ? On Samsung Galaxy S10 Lite is a counterexample.
Here are some entries here for an example:
3 Replies
In sum:
- How is pixel ratio devised?
- is dpi and ppi the same?
The first thing I'd say is, don't worry about pixel ratios 😅 - the only place they really matter is with images and other things like that (more on that lower down)
All the pixel ratio is saying is "1 CSS pixel = X screen pixels".
So, if you declare
width: 25px, on a device with a pixel ratio of 1, it'll make it 25px wide. If it has a pixel ratio of 2, it'll make it 50 screen pixels wide, and so on.
The reason we have this is, 1 CSS pixel has no relation to actual pixels. It's a fixed unit of measure (1/96th on an inch).
That's why, if they have a pixel ratio of 4, most devices have a css ppi of 384. 4 * 96 = 384.
pixel ratio 3, then it's 3 * 96 = 288
The pixel ratio is defined by the OS.
---
As for dpi vs ppi, we have no dpi on screens. dpi is related to print, where it's how many dots of ink there are per inch.
Same concept, but one is for print, the other for screens.