Menu
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.
705
With the iPhone 6 (4.7 inches, 1334 x 750 pixels) and iPhone 6+ (5.5 inches, 1920 x 1080 pixels), Apple has cleverly kept the same 16:9 aspect ratio for its screen, which means current apps will automatically scale up to fit the device.
The iPhone 6 and iPhone 6s are remarkably similar in the way they look; they have the same size display (4.7in), the same display spec, and similar camera modules (single 8MP sensor). Visually, the phones look almost identical.
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!)
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
