What are the most common screen and browser width/height sizes to handle in order to cover common devices and browsers (i.e. both web and native)?

Question

Question

I have a library that I implemented to use in my frontend projects. (Details are not much relevant, but just in case you may wonder, they are provided below in the Background Info section. I'll be more than happy if more people find it useful.)

Now using this library I want to cover most common usages of native devices (phones, tablets, etc) and common browser usage width/height ratios.

I am not sure if such an information exists. but if so, I'll appreciate if you can point to a relevant study, or provide a list.

Edit 13.10.2022

After receiving some comments let me edit the question to provide some more clarity about what I intent to find. What I hope to find is some statistical information as can be seen from below tables. (The numbers are random, and provided 5 rows is just to show what I am looking for. Of course, ideally, the more rows the better.)

Browser

Least Width/Height	Highest Width/Height	Commonality Ratio
0	0.5	3%
0.5	0.9	19%
0.9	1.1	25%
1.1	1.5	50%
1.5	inf	8%

Native Device (includes both portrait and landscape orientation)

Least Width/Height	Highest Width/Height	Commonality Ratio
0	0.5	3%
0.5	0.9	19%
0.9	1.1	25%
1.1	1.5	50%
1.5	inf	8%

Background Info

I have recently implemented a react-native library (which can also be used by react projects through react-native-web). (*)

The logic of the library is, you provide lower and upper bounds with respect to width / height ratio of the screen or browser. And finds the corresponding layout design to use.

For example below configuration says if width/height is between 0 and 0.9 then place 3 divs in the screen. top, bottom, left, right represent the coordinates in scale from 0 to 1, where the related div (or View in case react-native) are placed.

[

    {
        validAfterWHRatio: 0,
        validBeforeWHRatio: 0.9,
        views: [
            { top: 0, bottom: 0.5, left: 0, right: 1, children: View1 },
            { top: 0.75, bottom: 1, left: 0, right: 1, children: View2 },
            { top: 0.5, bottom: 0.75, left: 0, right: 1, children: View3 },
        ]
    },

    ...
]

(*)

A web demo is here: https://mehmetkaplan.github.io/react-native-animated-layout/ (you can get the behavior of the library when you resize the browser or change your device orientation landscape - portraid).

The library is here: https://www.npmjs.com/package/react-native-animated-layout

Answer 1

Screen size and aspect ratio are moving targets: New devices with different screen sizes and aspect ratios are delivered to the market almost daily.

Your best bet is to focus on the users for each project you're working on. Step one of every project is requirements gathering. This is where you get tracking data from your software/website/etc to find out who is using it and how they are using it. In among all the metrics for demographics and geolocation, you should also have technical specs: what device is being used and what screen size/aspect ratio it has - you may even be able to get data on the shape and size of the viewport (not always full screen).

Library objects should be independent of screen sizes and aspect ratios for this reason. Your library objects need to be flexible enough for the designer/developer to be able to resize them according to requirements and not based on an average that could be outdated before you even release your library.

Having said all of that, for responsive design, we tend to think in terms of screen WIDTH breakpoints at 320px — 480px for mobile devices, 481px — 768px for iPads & tablets, 769px — 1024px for small screens like laptop, 1025px — 1200px for large screens like Desktops, and 1201px and above for extra large screens like TV. We don't tend to use height very much because vertical scrolling is widely understood and accepted by users.

As you can see from some of these descriptions, they are out of date because the technology has moved on faster than designers' and developers' processes and standards can keep up. Avoid putting objects that rely on a given aspect ratio or screen size in your library if at all possible.