iPhone 6 Screen Size and Web Design Tips

1
iPhone 6 Screen Size and Web Design Tips

• www. iprismtech.com

2
iPhone 6 Screen Size and Web Design Tips
Apple updated its iPhone a bit ago making the
form factor much bigger. The iPhone 6 screen size
is both wider and taller and the iPhone 6 Plus
also has a higher pixel density. This is an
update to my previous post about designing
websites for the iPhone 5. Itll cover these new
screen sizes and try to clarify how this all
works. Update 1 Apple has released the iPhone
6s and iPhone 6s Plus. The iPhone 6s screen size
is identical to the previous iPhone 6
versions. Update 2 Apple just announced the
iPhone 7 7 Plus. These iPhone 7 models follow
the same screen sizes as the 6s 6s Plus.
3
iPhone 6 Screen Size and Web Design Tips
iPhone Screen Measurements There are a few
different values to consider when looking at the
iPhone screen sizes. Im going to get these
values defined here so the chart below makes more
sense iPhone Display Size (inches) This is
diagonal measure of the screen, from corner to
corner, just like youd measure a TV. iPhone
Screen Size (points) These points are the size
that the device is using for coordinates. If
youre designing for the web (using CSS or
JavaScript) these values will be helpful. iPhones
use Retina screens which have a higher pixel
density. This means they take the larger iPhone
resolution (mentioned above) and compress those
pixels into a smaller space to make the image
look sharper. iPhone Rendered Pixels This is
the full number of pixels that are being
rendered. This is the value you get when you
apply the multiplier (1x, 2x, 3x) the device uses
to the screen size in points. If youre creating
an image and want it at the max resolution, this
is the size youd use. Ive also written an
article on Retina images if youd like to learn
more.
4
iPhone 6 Screen Size and Web Design Tips
iPhone Physical Pixels This is the actual
screens pixel resolution. The iPhone 6 Plus is
using a a larger image resolution on a screen
with a smaller number of physical pixels, so it
needs to be downsampled to this size. This value
is really only important in a specifications
perspective, but shouldnt really affect your
designs. Using the iPhone 6 Screen Size for Web
Design If youre coding your site using
Responsive design in order to fit the iPhone
well, you may have some sizing issues if you
dont tell the device not to zoom in. You can do
this by adding this viewport metatag into the
head of your site ltmeta name"viewport"
content"initial-scale1.0"gt
5
iPhone 6 Screen Size and Web Design Tips
Visit www.iprismtech.com Whatsapp/Call 91
9703604020 Like facebook.com/iprismtech Tweet
Twitter.com/iprismtech
6
iPhone 6 Screen Size and Web Design Tips
Thank You For Watching