Market share of various mobile screen sizes for responsive design

I got stats from my own site visitors

[MichaelBluejay]

I initially posted this on StackOverflow and promptly got downvoted, which is typical when I post anything there. WebmasterWorld is a lot more welcoming, and its where I cut my teeth on webdev 20 years ago. As time passed I'd mostly forgotten about WW as most of the action is on StackExchange, but I thought of WW today, so here's my post about mobile screen sizes.

I'm making a graphical map for one of my sites and needed to know what the smallest mobile screen size is that I'd need to support, because larger screens means I can use smaller font sizes (the image will stretch the larger screen). But I couldn't find good data on screen size market share elsewhere. All the articles quote StatCounter, but their report lists a whopping 1/3 of the users' size as "other", which is particularly unhelpful.

So I collected data from my own visitors, mostly U.S. I collected the data automatically, with Javascript. I recorded only one size for each IP (so not counting the same user twice if they visit multiple pages), and bots don't skew the results, or skew them much, because most bots don't understand JS, much less have a defined screen size to report. Here are the results for 419 total users.

51% mobile (320-440 pixels)
39% desktop (1020-3440 pixels)
2% intermediate (443-493 pixels)

I don't know what the devices are in the 443-493 pixel range. The user agents are Android, but those sizes don't show up in the viewport size list at Yesviz.com.

Breaking the mobile results down further:

320: 2%
360-361: 10%
375-386: 16%
390: 15%
392-393: 17%
400-412: 13%
414: 7%
421-432: 17%
440: 4%

And even further:

• 361: 12%
• 400: 41%

Here's how I collected the data, and how you can do the same:

(1) Insert some Javascript onto the pages of my site to grab the user's screen width and send it to my server as an AJAX request, to be recorded into an SQLite3 database. The value I captured was window.innerWidth. I also captured the user agent (navigator.userAgent) though I didn't really need it.

(2) Use a server-side script (Python, PHP, or Perl) to record the data into an SQLite3 database. (If you don't have database skills you could append to a text file.) My db fields were recordID, datetime, IP, screen width, and user agent. I had my script check to see if I'd already recorded a value for that IP, so I didn't record the same visitor twice.

Incidentally, this gave me insight into which visitors to my site were bots. Since I recorded datetime and IP, I could compare the records in my screen-width database to my server's visitor logs, and see which requests in the visitor logs didn't make it into the database. Those requests are from bots, that don't understand Javascript.

This is the JS I used to capture the data and send it to the server.

function recordScreenSize() {

// CREATE THE AJAX OBJECT

 const ajax = new XMLHttpRequest() // Other popular variables are "xhr" or "xhttp"

// GET THE DATA TO POST

 width = window.innerWidth
 userAgent = navigator.userAgent

// Encode special chars (esp. semicolons) to prevent the data from being sent

 userAgent = encodeURIComponent(userAgent)

// OPEN THE CONNECTION

 ajax.open("POST", "https://example.com/recordMobileScreenSize.cgi", true) // true = asynchronous

// SPECIFY THE DATA FORMAT (set to submit like a form)

 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

// SEND THE DATA TO THE SERVER

 ajax.send("width=" +width+ "&userAgent=" +userAgent)

}

[NickMNS]

You can that information from Google Analytics if you are using it.
As for what screen size to design to for a responsive design, I assume that what you are really asking is what should the breakpoints be. In that regard I stick with the default breakpoints of the CSS/UI framekwork i'm using. These days it's mostly Tailwind. See the defaults here:
[tailwindcss.com...]

There is also trusty old Bootstrap:
[getbootstrap.com...]

As far as the smallest width for graphics or images, I usually go with 360px, and ignore 320px devices which is limited to very old phone like < Iphone5. I think any user using such an old device expects that web-pages will break. Width is one issue, but really the outdated browser that these dievices support likely causes all kinds of other issue with both CSS and JS.

[MichaelBluejay]

I'm not using Google Analytics.

I'm not asking what the breakpoints should be. Like I said, I'm designing a graphical map. I'm trying to find the smallest font size I can use that will be visible to ~80% of visitors without their having to pinch-zoom.

I'm not asking about the smallest width for graphics. The image will actually be about 1200 pixels wide. It'll fit on any mobile screen because I'm using max-width:100%. The issue is, when it scales down to a mobile screen, will the words in the graphic be readable, or will they be too small? I'm targeting readable for ~80% of my visitors without pinch-zooming. The reason I don't just use a larger font is that there's not much room to work with (buildings and streets in the way), and smaller = less clutter on te map.

[lucy24]

most bots don't understand JS, much less have a defined screen size to report

If you see something improbable like 800x800, it's a robot that isn't quite as smart as it thinks it is. (I see this now and then in piwik. Yeah, robot, don’t think I don’t recognize you behind that mask.)

Personally I vehemently disapprove of setting an explicit point size. Users who know how to do so will change their device’s default; the rest are already accustomed to whatever the device uses. Or, wait, are you talking about graphics-as-text? Well, hmm, do try to keep it to an absolute minimum. I mean, er, use it as little as possible.

[MichaelBluejay]

I didn't capture screen heights, just widths. There were a tiny handful of widths that were weird (not in the standard lists of mobile sizes), as I noted, in the 443-493 range, whose user-agents said they were Android.

Yes, I'm talking about text as graphics. I *could* try to make the map in CSS rather than a drawing program...if I had a few extra weeks. :)

[Kendo]

posted this on StackOverflow and promptly got downvoted

I get that a lot, mostly by people who didn't bother to read the question properly or are disappointed in not finding a quick answer via search.

And yes they always search for an answer hoping to earn some quick brownie points, which is why we see so many questions marked as being "similar to another question". But again that's usually because they have yet again not read the question properly. Skim reading is a huge problem.

[NickMNS]

Yes, I'm talking about text as graphics

You can make your map using SVG, then you can size your font as you would with CSS (em or rem), of even use CSS directly.

I'm not asking about the smallest width for graphics. The image will actually be about 1200 pixels wide. It'll fit on any mobile screen because I'm using max-width:100%.

You are asking the smallest width for graphics, you just don't realize it. If you are scaling the map from 1200px to 100%, then on a 360px wide screen the with width is effectively 360px and a 320px screen would be 320px and so on. But at some point the screen becomes too small and the map and font becomes unreadable. And so you scale the font to make up for this. But even that strategy has its limits because at some point the font relative to the map becomes too big and all one sees is font So no matter what there is a limit. All I am saying is that I set a target of 360px as my minimum, I don't even try to make the graphics legible for 320px or any size under 360px. In fact I set min-width of 360px, and users with smaller screens need to scroll horizontally to see the full image.

Another strategy you can use if even 360px proves to be too small, show a smaller map with less text and detail and make the map clickable to display full size. When the user clicks they'll need to scroll around to see the full map but they'll be able to get the full detail. On large enough screens you can simply display the full sized map.

[MichaelBluejay]

Others might enjoy doing extra work for no real benefit, but that's not me. My way worked perfectly: I found 80th-percentile screen size, designed for that, done.