iPhone 6 and 6 Plus Responsive Breakpoints

ios css responsive-design media-queries iphone-6
user3349250 picture user3349250 · Sep 10, 2014 · Viewed 80.2k times · Source

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.

Answer

Jack picture Jack · Sep 10, 2014

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!)

Related questions

iOS 8 removed "minimal-ui" viewport property, are there other "soft fullscreen" solutions?

(This is a multi-part question, I will try my best to summarise the scenario.) We are currently building a responsive web app (news reader) that allow users to swipe between tabbed content, as well as scroll vertically inside each tabbed …

Read More
What are the device-width css viewport sizes of the iPhone6 and iPhone 6 Plus

The iPhone 6 and iPhone 6 Plus were just announced. But as usual, phone specs never give the meta viewport device-width sizes in CSS Pixels or DPR at width=device-width,initial-scale=1. Predictions have been made, speculating on 375/414px viewport width, but that …

Read More
Google Web Fonts don't load in Chrome for iOS

When I use Google Webfonts, they load fine on every browser I care about, EXCEPT Chrome/iOS. This seems odd, as it works fine on Chrome for Mac and Safari for iOS, so I don't think it's an iOS problem …

Read More