Common Viewport Sizes for Mobile
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.
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.
Is your website Mobile Friendly?
Find out if your site is mobile friendly using Googles new mobile friendly tool
