Search code examples
cssscreen-resolution

How does this CSS media screen target phones that have resolution width 1080p?

I've seen the CSS media query below recommended to target phones. Yes, it works for my phone. However, my phone, and many others, have resolution width 1080px. How does it work...?

@media screen and (max-width: 1024px) { }
Solution

  • Every devise has physical pixel size and a ratio for browsers. For instance iPhoneX has with 1125px and a ratio 3. So the CSS width will be 375px.

    So for it's screen with physical resolution 1125px your media will be 

    @media screen and (max-width: 375px) { }

    Very good table with devises resolutions, ratios and CSS scale here:

    https://www.mydevice.io/#compare-devices

    Although you can determine in media the -webkit-device-pixel-ratio and orientation, like this

    /* iPhone X in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}

    More about it here http://stephen.io/mediaqueries/