The ideal viewport doesn’t exist

Before you settle on basing design decisions on a handful of strict breakpoints, make sure you consider the vast fragmentation of screen sizes and browser viewports.

Here at Set Studio, we conducted a little casual experiment to answer “how fragmented are viewport sizes?”. We gathered over 120,000 datapoints with over 2,300 unique viewport sizes. The data mainly came from users in the USA and Europe, therefore it is not necessarily representative of a global audience, but still useful for this article.

The experiment only ran for 48 hours, but the data we got was pretty interesting. Let’s dive in and take a look.

What does 120,000 datapoints represent?

It's important to understand just how many 120,000 is in relative terms. For comparison, let’s presume each datapoint is a person.

Wembley stadium has a capacity of 90,000, so our datapoints could fill Wembley once and still fill another third of the available capacity.

The population of our home town, Cheltenham, is around 116,000 so our datapoints could almost populate the entire town!

What are the top viewport sizes

If we slice out the top 20 unique viewports from the gathered datapoints, it’s primarily small sizes. You could presume these are mobile devices — especially the top 10 — but it’s also worth considering that viewports vary on conditions too.

Even on one iOS device, there's a minimum of 3 environments a website could find itself in, based on operating system states.

  • Set Studio website in safari
    In safari
  • Set Studio website in-app browser
    In-app browser
  • Set Studio website in 3d touch preview
    3d touch preview
buildexcellentwebsit.es

This isn't a problem if you build in a fluid, flexible manner. That is illustrated in this diagram. If however, you tend to build with very specific breakpoints and hard values for typography, sizing and spacing, you might find that even with the best intentions, you’re not providing the optimal user experience.

Let's take an example of a “pixel perfect” UI with a fixed header and/or footer. It might look great when you shrink your development browser down, but how does it look in the conditions outlined earlier? How does it look when you visit from a tiny viewport like a smart watch? How does it look when you visit from a landscape phone?

Based on some of the combinations of aspect ratio and dimensions, we're confident those cases were represented in our data. Also, people told us too.

Before you commit to fixed headers and/or footers, consider how much content your users will actually be able to see in less than ideal conditions

"Mobile" vs "Desktop"

We've only captured width and height for each datapoint for this experiment and these dimensions were gathered using window.innerWidth and window.innerHeight. We decided to treat any width greater than 800px as “desktop”, or as we prefer to call it, a large viewport.

Mobile
Desktop

You might be thinking “800px is way too small for desktop”, which if we were measuring screens, you would be right. We’re measuring viewports here though. A viewport is the window size of the browser, not the screen size.

If you’re on a desktop device reading this, how many windows are filling the entire screen? How much screen space does the browser you’re reading from take up?

It’s safest to presume that users on desktop or laptop devices are not filling their entire screen with a browser. Heck, even tablet users don't fill the screen with a browser, so make sure you consider that when figuring out your larger viewport designs — especially if you’re concealing content for small screens and showing it for “desktop users”. Ask yourself if needing to hide content for small screens and not larger screens means that content is as necessary as you initially thought.

Also consider the sheer fragmentation of “desktop” viewports when working with layouts. Yes, configuring layouts and font sizes using media queries might make sense if you’re using the classic 768px, 1024px and 1280px breakpoints, but what about the vast array of sizes in between?

Let’s see all the viewports

Ok, we've passed on our advice but really, you're here to see a visualisation of the viewports aren't you? Your wish is our command.

Taking inspiration from the 2015 Open Signal report on Android screen fragmentation, we've laid the top 150 in a masonry layout. You can see all 2,300 too.

  • Width
    390px
    Height
    670px
    Count
    8691
  • Width
    393px
    Height
    666px
    Count
    4800
  • Width
    375px
    Height
    635px
    Count
    4618
  • Width
    390px
    Height
    664px
    Count
    2503
  • Width
    393px
    Height
    660px
    Count
    2318
  • Width
    414px
    Height
    721px
    Count
    2130
  • Width
    375px
    Height
    641px
    Count
    1890
  • Width
    428px
    Height
    752px
    Count
    1692
  • Width
    375px
    Height
    559px
    Count
    1643
  • Width
    375px
    Height
    629px
    Count
    1393
  • Width
    430px
    Height
    746px
    Count
    1231
  • Width
    412px
    Height
    783px
    Count
    824
  • Width
    390px
    Height
    663px
    Count
    766
  • Width
    393px
    Height
    722px
    Count
    577
  • Width
    414px
    Height
    715px
    Count
    565
  • Width
    390px
    Height
    669px
    Count
    543
  • Width
    396px
    Height
    727px
    Count
    540
  • Width
    412px
    Height
    784px
    Count
    528
  • Width
    412px
    Height
    771px
    Count
    523
  • Width
    1920px
    Height
    937px
    Count
    512
  • Width
    412px
    Height
    786px
    Count
    504
  • Width
    360px
    Height
    649px
    Count
    469
  • Width
    750px
    Height
    346px
    Count
    456
  • Width
    390px
    Height
    666px
    Count
    443
  • Width
    393px
    Height
    659px
    Count
    441
  • Width
    414px
    Height
    725px
    Count
    441
  • Width
    414px
    Height
    789px
    Count
    429
  • Width
    414px
    Height
    787px
    Count
    428
  • Width
    412px
    Height
    770px
    Count
    422
  • Width
    428px
    Height
    746px
    Count
    417
  • Width
    390px
    Height
    665px
    Count
    404
  • Width
    375px
    Height
    548px
    Count
    374
  • Width
    375px
    Height
    630px
    Count
    367
  • Width
    414px
    Height
    790px
    Count
    360
  • Width
    412px
    Height
    760px
    Count
    354
  • Width
    360px
    Height
    560px
    Count
    354
  • Width
    1194px
    Height
    766px
    Count
    333
  • Width
    430px
    Height
    740px
    Count
    322
  • Width
    390px
    Height
    661px
    Count
    320
  • Width
    375px
    Height
    634px
    Count
    319
  • Width
    1920px
    Height
    961px
    Count
    301
  • Width
    375px
    Height
    631px
    Count
    296
  • Width
    360px
    Height
    682px
    Count
    285
  • Width
    393px
    Height
    736px
    Count
    285
  • Width
    360px
    Height
    512px
    Count
    267
  • Width
    408px
    Height
    764px
    Count
    266
  • Width
    432px
    Height
    784px
    Count
    254
  • Width
    390px
    Height
    662px
    Count
    250
  • Width
    360px
    Height
    667px
    Count
    249
  • Width
    360px
    Height
    670px
    Count
    236
  • Width
    393px
    Height
    662px
    Count
    232
  • Width
    750px
    Height
    307px
    Count
    224
  • Width
    414px
    Height
    785px
    Count
    223
  • Width
    1728px
    Height
    1000px
    Count
    222
  • Width
    2560px
    Height
    1289px
    Count
    222
  • Width
    393px
    Height
    698px
    Count
    221
  • Width
    1920px
    Height
    929px
    Count
    219
  • Width
    1920px
    Height
    944px
    Count
    214
  • Width
    414px
    Height
    719px
    Count
    212
  • Width
    360px
    Height
    648px
    Count
    212
  • Width
    768px
    Height
    960px
    Count
    209
  • Width
    393px
    Height
    737px
    Count
    208
  • Width
    384px
    Height
    726px
    Count
    204
  • Width
    1920px
    Height
    947px
    Count
    203
  • Width
    384px
    Height
    723px
    Count
    201
  • Width
    375px
    Height
    628px
    Count
    199
  • Width
    724px
    Height
    292px
    Count
    195
  • Width
    734px
    Height
    349px
    Count
    193
  • Width
    375px
    Height
    633px
    Count
    192
  • Width
    384px
    Height
    713px
    Count
    190
  • Width
    375px
    Height
    632px
    Count
    190
  • Width
    393px
    Height
    780px
    Count
    186
  • Width
    1920px
    Height
    919px
    Count
    185
  • Width
    378px
    Height
    711px
    Count
    184
  • Width
    375px
    Height
    626px
    Count
    184
  • Width
    1536px
    Height
    827px
    Count
    183
  • Width
    320px
    Height
    460px
    Count
    180
  • Width
    393px
    Height
    658px
    Count
    178
  • Width
    2560px
    Height
    1287px
    Count
    175
  • Width
    1366px
    Height
    956px
    Count
    175
  • Width
    428px
    Height
    748px
    Count
    173
  • Width
    393px
    Height
    732px
    Count
    170
  • Width
    384px
    Height
    754px
    Count
    170
  • Width
    485px
    Height
    921px
    Count
    170
  • Width
    414px
    Height
    714px
    Count
    169
  • Width
    360px
    Height
    643px
    Count
    165
  • Width
    375px
    Height
    644px
    Count
    165
  • Width
    375px
    Height
    627px
    Count
    163
  • Width
    712px
    Height
    331px
    Count
    160
  • Width
    712px
    Height
    292px
    Count
    160
  • Width
    1800px
    Height
    1006px
    Count
    159
  • Width
    360px
    Height
    617px
    Count
    158
  • Width
    1680px
    Height
    914px
    Count
    158
  • Width
    820px
    Height
    1112px
    Count
    158
  • Width
    1412px
    Height
    767px
    Count
    157
  • Width
    414px
    Height
    699px
    Count
    156
  • Width
    1512px
    Height
    833px
    Count
    154
  • Width
    378px
    Height
    707px
    Count
    153
  • Width
    2560px
    Height
    1297px
    Count
    151
  • Width
    1728px
    Height
    994px
    Count
    150
  • Width
    393px
    Height
    473px
    Count
    150
See all the viewports

Interesting comparisons

Breakpoints from popular frameworks

  • MD

    Commonly 768px width.

    Count: 501

    Percent: 0.42%

  • LG

    Commonly 1024px width.

    Count: 367

    Percent: 0.31%

  • XL

    Commonly between 1200px and 1300px width.

    Count: 2566

    Percent: 2.14%

Breakpoints from Figma

  • Default "desktop"

    1440px x 1024px

    Count: 20

    Percent: 0.02%

  • iPhone 14

    390px x 844px

    Count: 36

    Percent: 0.03% (this is full screen tho)

    Just on width (390px) it's a much different picture.

    Count: 14742

    Percent: 12.29%

  • iPhone 13 mini

    375px x 812px

    Count: 0

    Percent: 0%

    Just on width (375px) it's a much different picture.

    Count: 14557

    Percent: 12.13%

Download JSON data Download CSV data

What’s the point of all of this?

The main point we’re trying to get across is that you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports.

Our recommendation to clients is always to be the browser’s mentor, not its micromanager. Create flexible rules and allow the browser to do what it does best: calculate the best outcome based on the conditions it finds itself in.

This goes all the way back to planning your projects too. When mapping out page content, ask yourself how it will be for the weird viewport sizes that don’t fit the typical mould? Always try to simplify and condense content to make it useful for everyone.

And finally, always remember that you do not know what conditions your website will be visited on and you have little to no control over that. Accept that lack of control and use the limitations to breed creativity and also, laser focus your UX work.

It’s certainly how we do it, here at Set Studio.

Hey there, we are Set Studio.

We help organisations set clear goals and deliver them with confidence, by helping them produce stunning websites that work for everyone.

We would love to help you produce stunning websites, too, so why not see what we're all about?

See what we’re all about