ios - iPhone 6 and 6 Plus Media Queries

Question

Does anyone know specific screen sizes to target media queries for iPhone 6 and 6 Plus?

Also, the icon sizes and splash screens?

Answer 1

iPhone 6

• Landscape

  @media only screen 
      and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
      and (max-device-width : 667px) // or 41.6875em
      and (width : 667px) // or 41.6875em
      and (height : 375px) // or 23.4375em
      and (orientation : landscape) 
      and (color : 8)
      and (device-aspect-ratio : 375/667)
      and (aspect-ratio : 667/375)
      and (device-pixel-ratio : 2)
      and (-webkit-min-device-pixel-ratio : 2)
  { }
  

• Portrait

  @media only screen 
      and (min-device-width : 375px) // or 213.4375em
      and (max-device-width : 667px) // or 41.6875em
      and (width : 375px) // or 23.4375em
      and (height : 559px) // or 34.9375em
      and (orientation : portrait) 
      and (color : 8)
      and (device-aspect-ratio : 375/667)
      and (aspect-ratio : 375/559)
      and (device-pixel-ratio : 2)
      and (-webkit-min-device-pixel-ratio : 2)
  { }
  

  if you prefer you can use (device-width : 375px) and (device-height: 559px) in place of the min- and max- settings.

  It is not necessary to use all of these settings, and these are not all the possible settings. These are just the majority of possible options so you can pick and choose whichever ones meet your needs.

• User Agent

  tested with my iPhone 6 (model MG6G2LL/A) with iOS 9.0 (13A4305g)

  # Safari
  Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
  # Google Chrome
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
  # Mercury
  Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
  

• Launch images

  • 750 x 1334 (@2x) for portrait
  • 1334 x 750 (@2x) for landscape

• App icon

  • 120 x 120

---

iPhone 6+

• Landscape

  @media only screen 
      and (min-device-width : 414px) 
      and (max-device-width : 736px) 
      and (orientation : landscape) 
      and (-webkit-min-device-pixel-ratio : 3) 
  { }
  

• Portrait

  @media only screen 
      and (min-device-width : 414px) 
      and (max-device-width : 736px)
      and (device-width : 414px)
      and (device-height : 736px)
      and (orientation : portrait) 
      and (-webkit-min-device-pixel-ratio : 3) 
      and (-webkit-device-pixel-ratio : 3)
  { }
  

• Launch images

  • 1242 x 2208 (@3x) for portrait
  • 2208 x 1242 (@3x) for landscape

• App icon

  • 180 x 180

---

iPhone 6 and 6+

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

---

Predicted

According to the Apple website the iPhone 6 Plus will have 401 pixels-per-inch and be 1920 x 1080. The smaller version of the iPhone 6 will be 1334 x 750 with 326 PPI.

So, assuming that information is correct, we can write a media query for the iPhone 6:

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

Note that device-aspect-ratio will be deprecated in http://dev.w3.org/csswg/mediaqueries-4/ and replaced with aspect-ratio

Min-width and max-width may be something like 1704 x 960.

---

Apple Watch (speculative)

Specs on the Watch are still a bit speculative since (as far as I'm aware) there has been no official spec sheet yet. But Apple did mention in this press release that the Watch will be available in two sizes.. 38mm and 42mm.

Further assuming.. that those sizes refer to the screen size rather than the overall size of the Watch face these media queries should work.. And I'm sure you could give or take a few millimeters to cover either scenario without sacrificing any unwanted targeting because..

@media (!small) and (damn-small), (omfg) { }

or

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

It's worth noting that Media Queries Level 4 from W3C currently only available as a first public draft, once available for use will bring with it a lot of new features designed with smaller wearable devices like this in mind.