How does CSS media queries based on pixels work with modern smart phones?-CodePudding

Consider a smart phone with screen resolution 1440 x 2960 pixels. Now if I do a CSS mobile query like @media(max-width: 500px), then even though it is a mobile device it won't satisfy the media query.

But it does. Consider this website Loruki, it has the same media query of max-width of 500px, yet it works like a mobile based web page when opened from 1440 x 2960 device.

How does pixel and media query work?

CodePudding user response：

You are confusing screen resolution with screen width

i.e. A phone's screen width is usually around 200 to 500 CSS pixels.

This famous blog post explains why there was the need for this being introduced: a pixel is not a pixel

Medium also has an excellent explanatory article on the topic.

For high resolutions screens, the so-called device-to-pixel ratio is greater than 1. To calculate the CSS pixel width, this is the formula:

CSSPixelWidth = DevicePixelWidth / DevicePixelRatio