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!
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
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?
Steven Parker227,126 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 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!