Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Jon Mirow
Jon Mirow
9,864 Points

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
229,670 Points
Steven Parker
Steven Parker
229,670 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.

Jon Mirow
Jon Mirow
9,864 Points

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
229,670 Points
Steven Parker
Steven Parker
229,670 Points

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

Jon Mirow
Jon Mirow
9,864 Points
Jon Mirow
Jon Mirow
9,864 Points

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!