Comments (7)
@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
from react-socks.
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.
from react-socks.
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?
from react-socks.
@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.
from react-socks.
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?
from react-socks.
@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]
from react-socks.
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.
from react-socks.
Related Issues (20)
- Tests fail HOT 1
- Cannot Resolve Symbol 'BreakpointProvider' HOT 2
- Any thought of adding `style` to a Breakpoint? HOT 1
- Debounce should cancel in ComponentWillUnmount HOT 2
- TypeScript typings? HOT 3
- { setDefaultBreakpoints } is not working properly
- Component Flashes on Screen HOT 5
- Styling on Mobile in build is lost HOT 5
- Hard Refresh in Browser Produces Warning and Incorrect CSS HOT 8
- v2.0.0 - Typings issue for Breakpoint and useCurrentWidth/useCurrentBreakpointName HOT 14
- Consider throttling the window resize event HOT 2
- Server side rendering wrong css styles HOT 9
- TypeError: Super expression must either be null or a function HOT 8
- Class name for undefined breakpoint HOT 3
- `window.removeEventListener` isn't removing the event listener HOT 2
- Not working with Swiper
- Typescript error with `style` prop
- Server-side rendering issue HOT 2
- We could use `matchMedia` to pass in custom media queries HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-socks.