iPhone Screen Sizes and Media Queries

iphone

When styling mobile-friendly pages I have run into issues between the different iPhone X versions.  Also included: iPhone 7 and 8.

iPhone XR

/* 1792x828px at 326ppi */ 
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { } 

iPhone X

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone Xs

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }

iPhone 7+/8+

 
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-height: 736px) 
    and (-webkit-device-pixel-ratio: 3) { }

iPhone 7/8

/* iphone 6, 6s, 7, 8 */
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-height: 667px)  
    and (-webkit-device-pixel-ratio: 2) { }

Resources:

 

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.