33

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 still remains unclear...

NB: Please don't speculate or post answers with the known overall device resolution or specs, it's not what I am looking for. I want the default responsive portrait and landscape viewport-width in pixels.

hexalys
  • 5,177
  • 3
  • 31
  • 56

4 Answers4

56

Below is the ios Device Sizes with detailed information

enter image description here

References

swiftBoy
  • 35,607
  • 26
  • 136
  • 135
43

(css) device-width of iPhone 6 is 375px, of iPhone 6 Plus is 414px. Note that iPhone 6 Plus report window.devicePixelRatio = 3 (while not truly at 3 DPR)

Update 1: just to clarify, I believe this is NOT a prediction, but actually tested. See more detailed and reputable reference. If in doubt, you can wait for device to be out.

Update 2: for users with Display Zoom enabled on iPhone 6, css viewport in Mobile Safari fallback to 320px (like iPhone 5); for iPhone 6 Plus, it fallback to 375px (like iPhone 6).

bitinn
  • 9,188
  • 10
  • 38
  • 64
  • I was waiting for the source. Apparently was taken off of xcode first then verified against existing 413px breakpoints on the Apple website. So with that 375px and 414px has to be accurate. Thank for the pointers. – hexalys Sep 10 '14 at 20:04
  • 8
    For those wanting to know the full dimensions (incl height): iP6 is 375x667 and iP6+ is 414x736. – aaaidan Oct 02 '14 at 02:15
  • Thank you for the Update 2! – Alexander Poleschuk Jul 07 '15 at 15:38
  • 1
    I've spent almost half a day figuring out why my css changes for iPhone6+ device is not showing up on my iPhone. Then I just discovered that all along, my viewport size is reporting 375px because my device display is zoomed. – Ross Oct 29 '15 at 04:15
7

According to CSSpixels

iPhone 6: 1334x750, viewport 667x375

iPhone 6+: 2208x1242 *, viewport 736x414 *

*Virtual resolution is subsampled to fit 1920×1080 screen.

megatoad2
  • 79
  • 1
  • When you take a screeshot, the image is 1334x750 pixels. So why does the browser only use 320px? – Curtis Jul 14 '18 at 18:41
-1

Device-width is indeed 375x667, but that does not mean the viewport is that size. Here is an empirical sample. Note that the numbers are rounded to the 10s. Device-width vs. reported Viewport with sample data

jeffmcneill
  • 2,052
  • 1
  • 30
  • 26
  • That is why I mentioned 'device-width' css viewport sizes. Implying the default device-width or 'device-height'. Not the viewport width or height. – hexalys Oct 02 '16 at 08:17
  • what do u mean the viewport is not that size?? the viewport is indeed 375x667 whereas the resolution is much greater... – oldboy Mar 23 '19 at 00:35