blog-image

iPhone 6 screen size and web design tips

16 Nov. 15
2.54 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 2x
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.

Blog A directory of wonderful things

Every now and then we are relying oftenly on the gadgets to make our lives much easier and simpler. Wearables were most popular gadgets ever since they were envisioned. Towards …

The Internet of Things (IoT) is often talked about as some distant future vision. Consumers dream about connected lives, journalists talks about how IoT will change the web. It might …

IoT is amending almost every physical object that is surrounded by us in an ecosystem of connected things. From home to parking spaces, IoT based solutions are connecting more and …

LetsNurture wishes you all a very happy new year. We hope you already have planned your new year resolutions. At LetsNurture, our employees surely have taken some innovative resolutions. We, …

2016 was a year full of enthusiasm and excitement as there had been many achievements and memories to cherish. New technologies emerged with new challenges to zeast our capabilities a …

IoT is a vast technology to talk or write about. Internet of things as is self-explanatory term defines the technology where the daily objects are connected to internet. From connected …

The objects connected to the internet is termed as internet of things profoundly known as IoT. It has made its way to build any individual’s lifestyle in a better shape. …

Ericsson predicts that by 2020, human population will grow to 7.6 billion, with almost 50 billion devices connected to the Internet. Not only the devices or smartphones but also the …

As you all are aware Internet of Things or IoT lets you connect multiple devices within a network. All the connected device are either wireless transmitters or receivers of low-frequency …

Internet of things is a concept of connecting everyday objects to the internet, allowing them to send and receive data. This concept has opened a door to humongous opportunities in …

The concept of bridging the interaction between any physical object and internet is called IoT. It enables you to discover web pages associated with everyday objects and locations. The Physical …

Imagine the world where you could remotely control your home appliances and switch it on or off. A place where you can control water pumps of your farm from far …

Manufacturing is one of most complex engineering fields and bringing innovation into it makes things strenuous. The need for manufacturing organisations to be hyper-efficient while providing extreme flexibility with mass …

Parking is not a problem that goes down with one particular city, its worldwide. Every metro city in every continent is struggling with rising number cars and shrinking parking area. …

Security is an issue that is faced at every corner of life. May it be the security of your vehicle, your home, your family or you. The security at your …

“Technology – a boon or a bane” This is a very old topic answered many times in many ways right from school essays, college debates. and group discussion for jobs. …

After acquiring Nest Labs Inc. in 2014, Google had made it clear to its rivals that will surely be making its mark in the Home Automation sector. It later released …

Most of us are familiar with the movie Minority Report, it showed how smart billboards (digital billboards) that display different ads depending on who is looking at them. At the …

Real Time Operating Systems have created quite a buzz in recent IoT conferences. The most primary tech gadgets of till now – Computer and Smartphones are left out as the …

A new technology coming up every day is making the world much more connected and a smaller place for us. Things are getting more and more digitalised. Every device that …

CONTACT US

Have an !dea or need help with your current business?

For immediate assistance in sales or support, please call us on:

+1-631-954-6922

loading...
We use cookies to give you tailored experiences on our website.
Okay