Mobile screen sizes for 2021 based on data from 2020

The ‘screen resolution’ metric in Google Analytics is essential to understand screen sizes, but it’s easy to forget to keep up with the most common screen resolutions people use to view your website.

This post contains our predicted most common mobile screen sizes in 2021, based on data gathered in the last half of 2020.

For design purposes, both width and height metrics are important, but in order to present the data we’ve focused on just the width to start with.

Mobile screen widths for 2021 based on 2020 data

Based on four high traffic websites and a sample of over 8 million users over 6 months (June – November 2020 compared to the same period in 2019). Sample uses data from travel, banking, ecommerce, and construction.

 

2021 screen size conclusions

• The most common mobile screen resolution we now see is between 412 and 414 pixels wide (mostly 414), previously the top spot was taken by devices 375 pixels wide
• With the growing base of phones with screen widths between 412-414 pixels, we’ll need to adjust how designers tackle designing for mobile
• Devices between 360 pixels and 375 pixels are still the most common, making up 55% of all devices from our sample
• There are much fewer visitors with ‘other’ sized screens compared the previous year

Taking the extra step and designing for our top few screen widths means that you can tailor the user experience for the majority of visitors in order to improve conversion rate.

 

The most common mobile screen sizes for 2021 (height and width)

Based on four high traffic websites and a sample of over 8 million users over 6 months (June – November 2020 compared to the same period in 2019). Sample uses data from travel, banking, ecommerce, and construction.

 

Why does screen height matter when users can scroll?

Designing for your most common device heights will also ensure you:

• You understand where the high attention areas of the page are
• You don’t cut off any important content like CTAs
• You can avoid false bottoms, which can reduce scrolling
• You can be aware of how much screen space you’re taking up by creating sticky headers / footers

 

How to find your own visitors most common mobile screen sizes for 2021 via Google Analytics

Easy method: Search for ‘mobile screen resolution’ in Google Analytics’ search bar – this will only give you figures for the last 7 days and won’t show you percentages, but fine if you wanted a top-level idea

Proper method: Create a custom report with the dimension of ‘screen resolution’, and metrics of ‘users’ and ‘user conversion rate’, using the ‘mobile’ segment, plus whatever else you need. I usually keep this report quite simple. Make sure you select a time period  of 3-6 months depending on how much data you have.

 

What’s the difference between screen resolution and viewport size?

The resolution depends on CSS pixel ratio. If pixel ratio increases, the resolution of the device can be increased, but the viewport size (which is the actual visible size of the screen) will not change.

The maximum resolution of a screen is actually a multiplier of CSS pixel ratio (Source: Yesvis). For example, an iPhone 12’s screen resolution is 1170 x 2532 but the viewport size (that we’ll see in Google Analytics) is 390 x 844.

 

Discrepancies in Google Analytics

Google Analytics makes it difficult to find which specific device visitors are using, and only provides screen resolution information for iPhones, whereas model numbers are available for other devices, so some assumptions have to be made.

 

If you would like help with your mobile experience, please don’t hesitate to get in touch by emailing [email protected] or calling 0161 236 1188.