Handling height

[admapop]

I found using react-socks quite straightforward, however, the single biggest thing which is holding it back is that, as far as I can tell, it does not handle height as well.

Example:
Mobile breakpoint works like a charm but as soon as I put my phone in landscape, Tablet breakpoint gets triggered. I can get by with some CSS hacks.

In time I'd like to contribute and maybe implement height handling as well.

Cheers.

[flexdinesh]

@admapop Thanks for the report and I am glad you like the lib and want to contribute. We have a few open issues, feel free to go through them and see if you could pick something up.

Now, to answer the issue, I think landscape mode is supposed to trigger a bigger breakpoint as breakpoints are purely based on width. I quite don't understand what you mean by height handling. Do you want to elaborate that a bit?

AFAIK, this is how even css breakpoints behave. Pl CMIIW.

[admapop]

@flexdinesh Sorry I've only noticed this now.
Height handling in the sense that nowadays you can have a phone that when in landscape the width is equal or larger than that of an iPad in Portrait and what ends up happening is that the tablet breakpoint gets triggered when in fact it should still be the mobile layout.

If there were Breakpoints for height as well I could tell React that even though the landscape Breakpoint got triggered, because the height is less than X, use the mobile Breakpoint.

Example: iPhone X/Galaxy S9, height of screen is north of 800px
iPad, width of screen 768px

[diogoviannaaraujo]

For dashboard-like apps and sidebars this would also be useful, sometimes you want to know if there is enough vertical space to render an extra cta and still avoid scroll in the navigation.

[flexdinesh]

It's a compelling case. Breakpoints were meant to be width driven and not device driven but having a height driven breakpoint would benefit a lot of use cases.

I think we can try and figure out a way to add height driven breakpoints and add it as an option rather than restricting based on portrait/landscape mode.

What ya'll think?

[rehman-00001]

Now, with customQuery we can specify queries like: (min-height: 540px) or (max-height: 900px). 👼 Would that be sufficient or do we need modifiers/attributes specific for this purpose? like we have for widths?

[admapop]

@rehman-00001 I'll have a play around but I think that will do it!
The next cool thing would be to specify breakpoint pairs:

mobile: [width, height],
tablet: [width, height]

[kosmiq]

Honestly I'd say that the preferred solution would be to mimic how CSS handles such cases.
CSS allows you to setup media queries with:

• orientation: landscape/portrait (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation)
• aspect-ratio: min-aspect-ratio: x/y (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio)

Another solution when you need more control over what the user might actually see is to create media queries that gives you information about orientation, resolution and aspect ratio. Previously this has been combined with using CSS media queries to set body:before with content that indicates whatever breakpoint we should look for. An (quite old) example is here: https://gist.github.com/prbaron/6460f566673ff0282494

And adding those CSS breakoint-declarations to above the fold inline CSS should be usable with great control of more than simple widhts.

This also allows for using orientation and aspect ratio instead if widths and heights, that might end up being a lot of devices.