1

Many posts (e.g. this) are dedicated to the minimal width for the responsive design and the consensus is that 320px is the reasonable minimal width. I understand that minimal height is not discussed, since scrolling content is considered a standard practice. However, there are certain pages that I would like to fit on one screen and hence I need those pages to be responsive for all reasonable width-height combinations. So, given the width of 320px, what is the minimal height I should care about?

In other words, up to which height my responsive layout must be well-behaved? So, in dev. tools I set the width to 320px and begin to gradually reduce the height. At which height can I say that I don't care much what will happen below that height?

Clarification I mean the vertical layout. So, if, for example, 480px is a fine minimal height, then I will test both 320x480 and 480x320.

P.S. The reply by @AlamKhan cites a table with viewport sizes of various devices, but I do not know which of these devices are popular enough to care about. Also, this table is some eight years old.

2 Answers 2

1

After struggling with multiple calculations, I was grateful to finally find a solution, which was also thanks to Chat GPT. Here's my approach: rather than trying to determine the minimum height, I decided to focus on the minimum width, which is generally agreed to be 320 pixels (although I prefer 250 pixels because Chrome dev tools shows the Galaxy Fold, which has a width of 250 pixels, but in most cases, mobile devices have a width of 320 pixels).

Now that we have established the minimum width, we need to find a list of all the aspect ratios that manufacturers produce (height to width ratio). This relationship determines how big or small the width is compared to the height. While considering this list, we need to take into account the orientation and identify the aspect ratio with the largest difference between the height and width. For each height-to-width ratio, we will need to calculate the difference between the height and width (using the absolute value). Once we find the aspect ratio with the highest difference, we can calculate the minimum height using the minimum width value, which we established as 320 pixels.

Suppose the aspect ratio with the biggest difference is 9:16. In that case, we may want to consider rotation and check the scenario where the height is smaller than the width (which would be 16:9). In that case, our minimum height would be 320*9/16=180 pixels. I know the numbers may seem a bit confusing because you would expect the height to be higher than the width of a mobile phone (which is about 568 pixels when we flip the ratio to 9:16), but that only works for mobile devices since they have a width lower than the height.

The approach is to make the height responsive to the width and consider the worst-case scenario for the height at each width and make our content adapt to it ...

We need to do it only once at a larger width, the width responsive assign units relative to the width that respects the calculated minimum height after the width your work on () ... once we make out div rescpect the worst case aspect ratio at a given width with all units relative to the viewport width (or parent width but the parent units must be relative to the width) it will always repect that aspect ratio until it reaches the minimum width which is 320px with a reference to the 180px ...

like that we can be less concerned about our layout fitting whenever it gets ...

I can provide a video description this works well on a login form but note that this approach is not always appropriate sometimes not very often say we can want to use scrolls or force user direction to make sure he have a flexible ux

0

You will not be able to define a fixed or minimum height.

Devices with 320px width vary in height. Here is a list of devices with 320px width but all with different height. I have worked a lot with no vertical scroll web pages and desktop screens. What I do is calculate the screen height and minus(-) all fixed component height like Headers, Breadcrumbs, Titles etc. and assign the remaining height to the area of the content.

If you go with fixed height or minimum height, you will be facing 2 major issues:

  1. Height will vary with different devices
  2. If the user rotate the screen the height as well as the width will change

The easiest solution I can think of is to get the screen height, do the calculation and assign the height.

3
  • This is not what I meant by minimal height. I meant to ask: up to which height my responsive layout must be well-behaved. So, in dev. tools I set the width to 320px and begin to gradually reduce the height. At which height can I say that I don't care much what will happen below that height? Commented Nov 30, 2021 at 20:30
  • @AlwaysLearning 320 (or less) will be the minimal height because the user can turn their device sideways. If you are intent on keeping everything above the fold your responsive layout will need to flow sideways or something to accommodate a viewport about 300 tall (to account for browser buttons). Commented Nov 30, 2021 at 21:31
  • I meant the vertical layout. So, if you tell me that 480px is a fine minimal height, then I will test both 320x480 and 480x320. Commented Dec 1, 2021 at 7:32

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.