Mobile Screen Sizes And Common Viewport Sizes

Using the meta viewport value width=device-width instructs the page to match the screen’s width in device independent pixels. This allows the page to reflow content to match different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.

Contents In This Article

Screen Size, Resolution, and Viewport: What does it all mean?

When you buy a device, you will often see both screen size and resolution listed in the specs. The screensize is the physical measurement diagonally of the screen in inches. This is not to be confused with the resolution, which is the number of pixels on the screen often displayed as a width by height (i.e. 1024×768). Because devices with the same screen size can have very different resolutions, developers use viewports when they’re creating mobile friendly pages. Viewports are scaled down versions of resolutions that allows sites to be viewed more consistently across different devices. Viewports are often more standardized and smaller than resolution sizes.

While desktop and laptop displays are in landscape orientation (wider than tall), many mobile devices can be rotated to show websites in both landscape and portrait (taller than wide) orientations. This means that designers and developers must design for these differences.

Meta Tag viewport element

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Property	Description
width	The width of the virtual viewport of the device.
device-width	The physical width of the device’s screen.
height	The height of the “virtual viewport” of the device.
device-height	The physical height of the device’s screen.
initial-scale	The initial zoom when visiting the page. 1.0 does not zoom.
minimum-scale	The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scale	The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalable	Allows the device to zoom in and out. Values are yes or no.

Apple Devices

Device	Pixel Size	Viewport
iPhone
iPhone 12 Pro Max	2778 x 1284	428 x 926
iPhone 12 Pro	2532 x 1170	390 x 844
iPhone 12	2532 x 1170	414 x 895
iPhone 11	1792 x 828	390 x 844
iPhone XR	828 x 1792	414 x 896
iPhone XS	1125 x 2436	375 x 812
iPhone XS Max	1242 x 2688	414 x 896
iPhone X	1125 x 2436	375 x 812
iPhone 8 Plus	1080 x 1920	414 x 736
iPhone 8	750 x 1334	375 x 667
iPhone 7 Plus	1080 x 1920	414 x 736
iPhone 7	750 x 1334	375 x 667
iPhone 6 Plus/6S Plus	1080 x 1920	414 x 736
iPhone 6/6S	750 x 1334	375 x 667
iPhone 5	640 x 1136	320 x 568
iPod
iPod Touch	640 x 1136	320 x 568
iPad
iPad Pro	2048 x 2732	1024 x 1366
iPad Third & Fourth Generation	1536 x 2048	768 x 1024
iPad Air 1 & 2	1536 x 2048	768 x 1024
iPad Mini 2 & 3	1536 x 2048	768 x 1024
iPad Mini	768 x 1024	768 x 1024

Android Devices

Device	Pixel Size	Viewport
Android Phone
Nexus 6P	1440 x 2560	412 x 732
Nexus 5X	1080 x 1920	412 x 732
Google Pixel 3 XL	1440 x 2960	412 x 847
Google Pixel 3	1080 x 2160	412 x 824
Google Pixel 2 XL	1440 x 2560	412 x 732
Google Pixel XL	1440 x 2560	412 x 732
Google Pixel	1080 x 1920	412 x 732
Samsung Galaxy Note 9	1440 x 2960	360 x 740
Samsung Galaxy Note 5	1440 x 2560	480 x 853
LG G5	1440 x 2560	480 x 853
One Plus 3	1080 x 1920	480 x 853
Samsung Galaxy S9+	1440 x 2960	360 x 740
Samsung Galaxy S9	1440 x 2960	360 x 740
Samsung Galaxy S8+	1440 x 2960	360 x 740
Samsung Galaxy S8	1440 x 2960	360 x 740
Samsung Galaxy S7 Edge	1440 x 2560	360 x 640
Samsung Galaxy S7	1440 x 2560	360 x 640
Tablets
Nexus 9	1536 x 2048	768 x 1024
Nexus 7 (2013)	1200 x 1920	600 x 960
Samsung Galaxy Tab 10	800 x 1280	800 x 1280
Chromebook Pixel	2560 x 1700	1280 x 850

Why be mobile friendly?

Mobile usage is exploding
Mobile First search indexing
Single website multiple devices
Single content single URL
Blogging and Social media bring mobile visitors
Recommended by Google
Responsive design is beneficial for SEO
Responsive designs adapt for future devices

In late 2012, Google conducted an independent survey titled “What Users Want Most From Mobile Sites Today.” Of the 1,088 smartphone users that were surveyed, about 67 percent indicated they would be more likely to purchase a product or service from a business that built a mobile-friendly website. Compounded with the fact that 61 percent of users also said they’d leave a site that’s not optimized for mobile and it’s clear that having a mobile-friendly site is more important than ever.