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:
image.png
Was this page helpful?