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 Parker200,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 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!