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.

 Device NamePlatformPortrait WidthLandscape Width
 iPad  iOS 1024 768
 iPad Mini  iOS 1024 768
 iPhone 6 iOS 375 667
 iPhone 6 Plus iOS 414 736
 iPhone 7 iOS 375 667
 iPhone 7 Plus  iOS 414 736

 

 Device NamePlatformPortrait WidthLandscape Width
 Android Tablet  Android 1280 800
 Android Phone Android 360 640

Full List of view port sizes 

Why be mobile friendly?

  • Mobile usage is exploding
  • 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