iPhone 6 screen size and web design tips


Nov. 15

5.12 K


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.


Ketan Raval
Posted by Ketan Raval

Blog A directory of wonderful things

Edge Computing Technologies for a Better IoT Ecosystem

According to worldwide IoT forecasts, by the year 2020, edge computing or infrastructure will reach 18% of the total spend on IoT infrastructure. The spending pattern is based on deployment …

10 Wearables that track your Health

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 …

Key factors to be considered to plan your first IoT product

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 …

Go Global with IoT based solutions – Smart SIMs

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 …

Welcome 2017 – A year to explore IoT, Big data, BI, Cultural expansion and much more

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, …

Bye Bye 2016 – A year of IoT, Chatbots, Process implementation and much more

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 …

How IoT wearables is trending in fashion with ‘smart shirt’

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 …

Why IoT solutions are trending in home appliances

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. …

IoT solution enables fleet tracking and much more

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 …

Hurdles in Large Scale Adoption of IoT Technology

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 …

How IoT is booming the Food Industry through Restaurant Application

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 …

Physical Web – Rebranding Internet of Things

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 …

IoT Solutions That Connects Travelers to Airports

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 …

Connected Factories : The Changing Face of Manufacturing Industry

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 …

Smart Parking Solution – Making the Parking Im-Possible

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. …

Securing IoT Devices in an Enterprise

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 …

Jobs that won’t Exist by Next 10 years

“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. …

Google releases OpenThread for Home Automation

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 …

Smart Billboards – Know your Audience better

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 that will Revolutionise the Future of IoT devices

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 …


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

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