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)

  # SafariMozilla/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 ChromeMozilla/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)# MercuryMozilla/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.

This is what is working for me right now:

iPhone 6

@media only screen and (max-device-width: 667px)     and (-webkit-device-pixel-ratio: 2) {

iPhone 6+

@media screen and (min-device-width : 414px)     and (-webkit-device-pixel-ratio: 3)

This works for me for the iphone 6

/*iPhone 6 Portrait*/@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { }/*iPhone 6 landscape*/@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { }/*iPhone 6+ Portrait*/@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { }/*iPhone 6+ landscape*/@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { }/*iPhone 6 and iPhone 6+ portrait and landscape*/@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ }/*iPhone 6 and iPhone 6+ portrait*/@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ }/*iPhone 6 and iPhone 6+ landscape*/@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ }