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 …
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:
|iPhone 6||iPhone 6 plus|
|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|
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)|
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 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 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.
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 …
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 …
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 …
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. …
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 …