Skip to main content
Michael Michalak

Main navigation

  • Home
  • About
  • Blog
  • Contact
User account menu
  • Log in

Breadcrumb

  1. Home

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:

  • Apple - Developer Archive
  • Apple Developer iOS Interface Guidelines
  • Stack Overflow: iPhone XR / XS / XS Max CSS media queries
  • Stack Overflow: All iPhones
  • Ultimate Guide to iPhone Resolutions

 

Tags

  • Drupal
  • Drupal 7
  • Drupal 8
  • Drupal Development

Comments

About text formats

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.

About

  • Resume
  • Shopify Experience
  • Drupal 7 Experience
  • Drupal 8 Experience
  • Drupal Commerce Experience
  • Hosting Experience
  • Videos

Connect

  • Contact
  • LinkedIn
  • Drupal.org
  • Github

Drupal Association

Drupal Association Individual Member Logo

 

RSS feed

Footer

  • Privacy Policy
  • Terms of Use

Mindfulness and Meditation LLC © 2023