html - Media queries for different devices

Question

I've been researching for a while now, but there's still something I cannot understand.

Many websites (1, 2) suggest some common breakpoints to use for media queries when we develop for smartphones.

Despite the debate between pixels, ems or rems (I usually use ems), the problem is that nowadays smartphones have increasingly high resolutions, up to 1080p or even 1440p.

It seems to me that this makes pointless differentiating the different types of devices using media queries, since modern smartphones have the same pixels width of many older desktops.

Writing a media query using @media (max-width: 600px) (or 37.5) doesn't make sense anymore, since (I tested it using my smartphone) it doesn't get triggered.

I cannot just increase the breakpoint level, since some older desktops or tablets have a lower resolution than modern smartphones. Furthermore, I would have an huge breakpoint going from 0 to, let's say, 1080px (which is still not enough).

I know about @media (hover: ...) but I didn't see anyone suggesting it for breakpoints and I couldn't find it anywhere peeking into some big websites' CSS

Am I missing something?

How do modern websites distinguish between smartphones and desktops?

---

Please don't attack me if I'm asking something stupid... I know that I could missing something easy but I cannot just get it. Any answer would be appreciated.

Thanks in advance.

question from:https://stackoverflow.com/questions/65944307/media-queries-for-different-devices

Answer 1

Even though mobile screens might have high resolutions, it doesn't matter - because the pixel density is the important thing here.

As long as you set your viewport to support mobile devices, media queries would work as you expect (using small numbers such as 600px).

You can read more about the meaning of CSS pixels on MDN.