Popular Screen Resolutions: Designing for All

In today’s world, there are a plethora of devices for people to choose from and it can be daunting to try to accommodate and build for the best experiences on all devices. However, it’s important to stay up-to-date with the most popular screen sizes and resolutions when designing web and mobile sites. A site that is optimized and responsive makes for an easier user flow and ultimately, an enjoyable experience for your audience.

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.

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.

Responsive Styling

It would be nearly impossible for businesses to design for each and every individual device. Instead, when programming responsive designs, developers often:

  • Group the styling into the most typical device sizes for phones, tablets, and desktops. In this case, anything larger than 7 inches is usually displayed at desktop resolution or-
  • Use breakpoints (defined pixel widths that the display will adjust layout based on screen size) dependent upon the design and layout

Sometimes, a developer might choose to combine both methods if they deem it necessary. We recommend starting by grouping typical device sizes together.

If you are a developer and are looking to generate the necessary styles to handle mobile or responsive styling, below we’ve included a snippet of CSS that could help. It’s important to note that these breakpoints are not fixed for all sites, and should only be used as a guide to get started:

/* start of desktop styles */    @media screen and (max-width: 991px) {  /* start of large tablet styles */    }    @media screen and (max-width: 767px) {  /* start of medium tablet styles */    }    @media screen and (max-width: 479px) {  /* start of phone styles */    }

Most Popular Screen Resolutions

Knowing that it is key to accommodate for the many different devices when designing websites, we have compiled a list of the most up-to-date devices with their respective pixel sizes and viewports below. We have also put this information into a handy downloadable PDF.

 

ss_desktopDesktops & Laptops

1024×768 pixels or higher

 

ss_appleApple Products
Pixel Size Viewport
iPhone
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

 

ss_androidAndroid Devices
Pixel Size Viewport
Phones
Nexus 6P 1440 x 2560 412 x 732
Nexus 5X 1080 x 1920 412 x 732
Google Pixel 4 XL 1440 x 869 412 x 869
Google Pixel 4 1080 x 2280 412 x 869
Google Pixel 3a XL 1080 x 2160 412 x 824
Google Pixel 3a 1080 x 2220 412 x 846
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 10+ 1440 x 3040 412 x 869
Samsung Galaxy Note 10 1080 x 2280 412 x 869
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
Pixel C 1800 x 2560 900 x 1280
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 2560 x 1700 1280 x 850

About shajal 160 Articles
I Am Professionally Graphic Designer With 2D Animation Design And Web

1 Comment

  1. My name’s Eric and I just came across your website – shajalbd.com – in the search results.

    Here’s what that means to me…

    Your SEO’s working.

    You’re getting eyeballs – mine at least.

    Your content’s pretty good, wouldn’t change a thing.

    BUT…

    Eyeballs don’t pay the bills.

    CUSTOMERS do.

    And studies show that 7 out of 10 visitors to a site like shajalbd.com will drop by, take a gander, and then head for the hills without doing anything else.

    It’s like they never were even there.

    You can fix this.

    You can make it super-simple for them to raise their hand, say, “okay, let’s talk” without requiring them to even pull their cell phone from their pocket… thanks to Talk With Web Visitor.

    Talk With Web Visitor is a software widget that sits on your site, ready and waiting to capture any visitor’s Name, Email address and Phone Number. It lets you know immediately – so you can talk to that lead immediately… without delay… BEFORE they head for those hills.

    CLICK HERE https://talkwithwebvisitors.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

    Now it’s also true that when reaching out to hot leads, you MUST act fast – the difference between contacting someone within 5 minutes versus 30 minutes later is huge – like 100 times better!

    That’s what makes our new SMS Text With Lead feature so powerful… you’ve got their phone number, so now you can start a text message (SMS) conversation with them… so even if they don’t take you up on your offer right away, you continue to text them new offers, new content, and new reasons to do business with you.

    This could change everything for you and your business.

    CLICK HERE https://talkwithwebvisitors.com to learn more about everything Talk With Web Visitor can do and start turing eyeballs into money.

    Eric
    PS: Talk With Web Visitor offers a FREE 14 days trial – you could be converting up to 100x more leads immediately!
    It even includes International Long Distance Calling.
    Paying customers are out there waiting.
    Starting connecting today by CLICKING HERE https://talkwithwebvisitors.com to try Talk With Web Visitor now.

    If you’d like to unsubscribe click here http://talkwithwebvisitors.com/unsubscribe.aspx?d=shajalbd.com

Leave a Reply