iPhone 6 screen size and web design tips

Nov. 15

5.12 K

VIEWS

Apple was holding back the inches for a while, but now they have made their new iPhones bigger. The iPhone 6 and iPhone 6 plus are coming with new screen sizes; new challenges in terms of viewport and image sizes come with them. In terms of web development, the changes are in different places:

Default mobile viewport (when using width=device-width).
Pixel ratio useful for responsive images.
Icon sizes.
Launch images.

Technical specifications:

	iPhone 6	iPhone 6 plus
Display size	4.7”	5.5”
Viewport’s device-width (in CSS pixels)	375	414
Viewport’s device-width on Android devices with similar display size	360	400
Device Pixel Ratio	2	3 (fake value)
Rendered Pixels (default viewport size * dpr)	750×1334	1242×2208
Physical pixels	750×1334	1080×1920

Viewport size:

It is the canvas where we render the page with the real screen size to avoid the zoomed out experience that we get when we open a desktop website on a mobile device. It is specified using a viewport meta tag and the value width = device-width.

Until now all iPhones exposed a 320 CSS pixels width when using the viewport declaration. But iPhone 6 and iPhone 6 plus are giving more space as they are wider than previous versions.

But the values Apple is using are not matching 1:1 the current values on the market, such as on Android (as below):

Screen size	Android (viewport width)	iOS (viewport width)
4.7-5”	360px	375px
5.5”	400px	414px

This means we should check if our websites are flexible enough to take advantage of the additional 14/15 pixels and we don’t have any visual glitch because of that.

Device Pixel Ratio:

iPhone 6

iPhone 6 plus

2.60x (actual calculation)

3x (as given by Apple)

In terms of Device Pixel Ratio, the iPhone 6 follows the same value as the previous Retina devices, using a value of 2.

The iPhone 6 plus on the other hand with 401 dpi needs a higher value. The real value should be around 2.60; however Apple has decided on a new concept: rendered pixels, emulating a 3x device pixel ratio.

If the DPR were 3x then the real physical screen (at 414 CSS pixels) should have a width of 1242 pixels but we know that is not true as the real width is 1080 pixels (13% smaller).

Therefore if we are providing 3x images for some Android devices, for example for the Galaxy S5 the image will be taken also for the iPhone 6 plus but it will be resized by the browser before rendering it on the screen.

Icon sizes:

iPhone 6	180 x 180
iPhone 6 plus	120 x 120 (like previous versions)

Launch Images:

If we have a home screen web app with launch images, we have now two new sizes to use with media queries so the browser will take the right one:

iPhone 6	750×1294
iPhone 6 plus	1242×2148

Based on this technical specifications and information, we can create highly intuitive “iPhone 6 optimized” web sites.

If you are looking for creating iPhone 6 optimized web sites or redesign your existing websites to take full advantage of new specifications provided by iPhone 6 than we have a team of expert UI designers who can convert your ideas into stunning websites. Please feel free to contact us for any queries.