0

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

14
  • What search terms you used when searching for common screen sizes so we don't duplicate your work? Commented Oct 13, 2022 at 12:06
  • Common browser sizes is what I tried to find. I could not find range statistics but rather I find predefined aspect ratios, like 4:3, 16:9, etc. What I would like to have is statistics like “between 4:3 to 5:3 20%, between 5:3 to 5,5:3 20%…etc”. And for native devices, similarly I can find the device screen sizes per device but not the ratios (commonalities) of those ratios. Commented Oct 13, 2022 at 12:23
  • 1
    An aspect ratio alone is IMHO quite useless. A phone in landscape will have an aspect ratio close to that of a desktop, however the size is very different, so the amount of information you can display and its layout are nearly necessary different. Even on the desktop, someone using a small 11" screen and someone using a large 32" screen definitely don't have the same real estate available. Also on the desktop (and now sometimes on tablets and even some phones), people can resize windows to use any size. Finally, some people have toolbar overload. Windows size <> Screen size.
    – jcaron
    Commented Oct 13, 2022 at 12:37
  • You can check bootstrap's breakpoints: getbootstrap.com/docs/5.2/layout/breakpoints for an idea of frequent size classes. The minimum split is usually phone (width < 600px or so), tablet/small screen (600-1000 or so), larger screen (>1000). But phones and tablets can be used in both orientations, windows on desktop can be resized (e.g. for side-by-side)....
    – jcaron
    Commented Oct 13, 2022 at 12:43
  • Thanks @jcaron. That segmentation is based on the absolute (px) values. On the other hand what I wanna find is a quantitative segmentation about width/height ratio. Commented Oct 13, 2022 at 12:54

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.