Queries for iPhone 6 and 6 Plus

Question

Does anyone know the specific screen sizes for targeted media queries for the iPhone 6 and 6 Plus?

Also, icon sizes and screensavers?

Answer 1

iPhone 6

• Scenery

  @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 to use (device-width : 375px) and (device-height: 559px) instead of the min- and max- .

  There is no need to use all of these settings, and these are not all possible settings. These are just the majority of options, so you can choose which ones suit 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 

• Image Launch

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

• App icon

  • 120 x 120

---

iPhone 6+

• Scenery

   @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) { } 

• Image Launch

  • 1242 x 2208 (@ 3x) for portraiture
  • 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) { } 

---

Projected

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

So, assuming the 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 at http://dev.w3.org/csswg/mediaqueries-4/ and replace with aspect-ratio

The minimum width and maximum width can be approximately 1704 x 960.

---

Apple Watch (speculative)

The specs on the Watch are still a little speculative, because (as far as I know) there has not yet been an official specification. But Apple mentioned in this press release that the Watch will be available in two sizes .. 38 mm and 42 mm.

In addition, assuming that these sizes are related to the size of the screen, and not to the total size of the Watch Watch, these media queries should work. And I'm sure that you could give or take a few millimeters to cover any 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 is worth noting that the W3C Media Queries Level 4 is currently only available as the first public draft, once it is available for use, it will bring with it many new features designed with smaller wearable devices such as this in mind.

Answer 2

This is what works for me 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) 

Answer 3

It works for me for 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){ } 

Answer 4

Just to let you know that the iPhone 6 lies around it min-width. He thinks it is 320, not 375, as suggested.

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

This was the only thing I could find to target the iPhone 6. 6+ works fine with this method:

 @media screen and (min-device-width : 414px) and (max-device-height : 736px) and (max-resolution: 401dpi) { } 

Answer 5

You must adjust the screen size using a multimedia query for different screen sizes.

for iphone :

 @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { } @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { } 

and for the desktop version:

 @media only screen (max-width: 1080){ }