16
Nov. 155 K
VIEWSApple 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:
| 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 |
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.
| 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.
| iPhone 6 | 180 x 180 |
| iPhone 6 plus | 120 x 120 (like previous versions) |
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.
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 …
Continue reading “Edge Computing Technologies for a Better IoT Ecosystem”
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 …
Continue reading “Key factors to be considered to plan your first IoT product”
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 …
Continue reading “Go Global with IoT based solutions – Smart SIMs”
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 …
Continue reading “Bye Bye 2016 – A year of IoT, Chatbots, Process implementation and much more”
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 …
Continue reading “How IoT wearables is trending in fashion with ‘smart shirt’”
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. …
Continue reading “Why IoT solutions are trending in home appliances”
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 …
Continue reading “IoT solution enables fleet tracking and much more”
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 …
Continue reading “Hurdles in Large Scale Adoption of IoT Technology”
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 …
Continue reading “How IoT is booming the Food Industry through Restaurant Application”
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 …
Continue reading “Physical Web – Rebranding Internet of Things”
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 …
Continue reading “IoT Solutions That Connects Travelers to Airports”
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 …
Continue reading “Connected Factories : The Changing Face of Manufacturing Industry”
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. …
Continue reading “Smart Parking Solution – Making the Parking Im-Possible”
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 …
Continue reading “Google releases OpenThread for Home Automation”
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 …
Continue reading “Smart Billboards – Know your Audience better”
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 …
Continue reading “Real Time Operating Systems that will Revolutionise the Future of IoT devices”
