-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[useMediaQuery] Result of useMediaQuery("(max-width: 767px)")
at 767px is false
on Windows
#43478
Comments
useMediaQuery("(max-width: 767px)")
is false
on WindowsuseMediaQuery("(max-width: 767px)")
at 767px is false
on Windows
It's a feedback about the |
@DanielBarbakadze Can you try using |
Thanks for the quick response @oliviertassinari, @siriwatknp I've updated the (Live Demo) link, looks like this is What's the best I can do in this case? |
Is it possible to switch the implementation from JS to CSS? If you want to show/hide a component, I recommend using CSS: <Box sx={{ display: { xs: 'none', md: 'block' } }}>…</Box> |
Thanks for the suggestion. I prefer to wait until I am closing this since it's not related to MUI anymore as it turned out. Thanks 🤚 |
Steps to reproduce
Link to live example: (Live Demo)
Steps:
useMediaQuery("(max-width: 767px)"
anywhere in a codetrue
false
It goes for all Browsers: Safari, Chrome, Firefox, Edge
Current behavior
useMediaQuery("(max-width: 767px)"
returnsfalse
on Windows andtrue
on macOS and LinuxExpected behavior
useMediaQuery("(max-width: 767px)"
returnstrue
on all OSContext
I just found out that some of my markup was messing around on Windows exactly at 767px, after debugging I found out it only happens on Windows at exactly that pixel screen width.
Your environment
npx @mui/envinfo
Search keywords: useMediaQuery
The text was updated successfully, but these errors were encountered: