Posted by CANbike on Tue, 7 Oct 2014

CSS Pixel Widths Update - Apple iPhone 6 and 6+

The pixel dimensions and viewport dimensions page has been updated with the Apple iPhone 6 and 6+ added to the list. However an explanation is required due to irregularities and uniqueness about the iPhone 6 Plus.

Brand Device Pixel Width Pixel Height CSS Pixel Ratio Device-Width Device-Height
Apple iPhone 6 1334 750 2 667 375
Apple iPhone 6 Plus 2208 1242 3 736 414

  • Visit CSS Pixel Widths for the complete and sortable list of CSS pixel ratios, Device-Widths and Device-Heights.

iPhone 6 a Standard Screen

The phone features a 4.7” Retina HD screen with 1334×750 physical pixels. With a CSS pixel ratio of 2, the viewport device dimensions are 667×375. These dimension are larger than the previous iPhones 5.

iPhone 6 Plus a Downsampled Screen

The iPhone 6+ introduces some oddities for Apple.

Screen is a 5.5” Retina HD display.

  • Physical pixel dimensions are 1920×1080
  • Virtual display dimensions are 2208×1242
  • CSS pixel ratio is 3

Downsampling to Save Cost

To save cost on the production of the iPhone 6+, Apple chose to use a display with 1920×1080 pixels. However, according to developer documents, iOS expects a desktop environment of 2208×1242 in order to achieve 3x rendering. As a result, the hardware reports to iOS a virtual screen resolution of 2208×1242 and subsamples it to 1920×1080 pixels.

    Apple iPhone 6 Plus-2208x1242-cropped.png
  • When 2208×1242 pixel screens are cheaper, Apple will start using them instead of subsampled screens. The transition, though, will be seamless as iOS is already working with those dimensions.
  • With a CSS pixel ratio of 3, the device dimensions are 736×414. However, the downsampled physical pixel resolution will be 640×360.

Developer Numbers

Ignore the physical pixel count. iOS expects a screen resolution of 2208×1242.

Related Item(s):