HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

How do high pixel density phones work with media queries?

For the last couple of years, it's been quite common for high end smartphones to have very high pixel densities over 500PPI. For example, many have QHD screens, which would be 1440px wide in portrait mode. Very few of us have laptops with qhd screens. So do these phone's browsers just fall through all the media query breakpoints and show the full, desktop-oriented layout on a tiny 2.7inch wide screen, or do we have to put in another check?

I was just wondering as all the advice for smartphones and media queries that I just googled seem to be to assume they are 300 and something pixels wide, but even mid-teir phones are now 1080px wide, and annoying have the same resolution as tablets, even though they have totally different physical sizes?

2 Answers

Steven Parker
Steven Parker
200,526 Points

You can test the density directly in the media query.

You can test values such as min-device-pixel-ratio (with a unitless value) and min-resolution (with a specific dpi) directly in your media query.

Thanks, I'll have to look into those! :)

It's really making it clear that I'm gonna need access to a large range of devices these days lol! I already found a US$14 android phone from ZTE for testing minumum (320X524) res, but this is the first time I thought about the higher density devices!

Steven Parker
Steven Parker
200,526 Points

Also look into using the srcset attribute in images so they will display in different resolutions even without media queries.

Thanks Steven Parker! I found out in the next section that px aren't pixels... so I think that takes care of the pixel density problem, but thanks for the amazing resoources!