iPhone 6 and 6 Plus Responsive Breakpoints

Question

According to Apple's site:

The iPhone 6 has 1334-by-750-pixel resolution at 326 ppi with 1400:1 contrast ratio (typical)

The iPhone 6+ has 1920-by-1080-pixel resolution at 401 ppi with 1300:1 contrast ratio (typical)

However, what would the CSS media query responsive breakpoints be for each? (portrait and landscape)

I don't fully understand how to test the retina screen sizes using the various responsive emulators out there. Any help would be much appreciated.

Generally if you are designing a responsive layout you don't design for specific device sizes. Just wanted to point that out. — hal, Sep 10 '14 at 12:27
I understand that. Im actually designing an App so I wanted to test the exact sizes for the new iphones. — user3349250, Sep 10 '14 at 13:40
A good explanation http://www.paintcodeapp.com/news/iphone-6-screens-demystified — Sten, Sep 13 '14 at 09:09

Jack · Answer 1 · 2014-09-18T17:00:48.913

55

You're referencing the physical pixels of the device, rather than the css device-width sizes. According to this tweet, the device-widths for the two will be:

iPhone 6: 375px (2.0 DPR)
iPhone 6 Plus: 414px (2.6 DPR)

Knowing that (and assuming the tweet is correct), and assuming your using the proper meta viewport tag, you're looking at roughly:

iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)

Hope this helps!

Edit:

Regarding the 2.6 DPR of the iPhone 6 Plus, it's actually 3.0 DPR downsized by 1.15, which results in 2.6 DPR. More info can be found at http://www.paintcodeapp.com/news/iphone-6-screens-demystified for clarification (thanks @mdcarter for the link!)

edited Sep 18 '14 at 17:00

answered Sep 10 '14 at 10:08

Jack

9,151
2
32
44

2

Thanks for the information Jack. I would up vote your answer by I don't have the reputation. – user3349250 Sep 10 '14 at 10:28
2

Actually the iPhone 6 plus will have a 3 density pixel ratio, but the image is after downscaled for the display. More informations here : http://www.paintcodeapp.com/news/iphone-6-screens-demystified – mdcarter Sep 16 '14 at 16:10
1

@mdcarter That's really interesting! I'll update my answer accordingly. Thanks! – Jack Sep 16 '14 at 16:29
1

@mdcarter - until I update my css to include 3x, will these devices still render the 2x or revert to 1x? – remarsh Dec 13 '14 at 23:58

score 18 · Answer 2 · edited Apr 15 '16 at 16:26

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /* iPhone 6 Portrait */ 
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /* iPhone 6 landscape */
}


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


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ 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 and landscape */
}

@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+ portrait */
}

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

You can get list of media queries for all standard devices here

iPhone 6 and 6 Plus Responsive Breakpoints

2 Answers2

Linked