Use matchmedia for questions related to programmatic discovery of API support for various media features in the runtime environment of a web browser.
References
Questions tagged [matchmedia]
91 questions
2
votes
2 answers
How to add removeEventListener in window.matchMedia?
Here is my problem:
I want to have an "addEventListener" click method only for browser size smaller than "400px". But when we resize the browser, I want to remove this method.
The format of my code is below. If I grow up the browser over 400px I…
Bbabis
- 165
- 1
- 12
2
votes
4 answers
Computed property with matchMedia function Vue.js
I have some problem with the matchMedia function that I wrote inside my computed property in Vue. The problem is when I load/refresh page, the function does not work.
It only back to work after I resize the screen in Responsive Design Mode at the…
αякjυηισя K
- 45
- 1
- 5
2
votes
1 answer
pass argument to matchmedia addListener callback function
I'm building a plugin and for the toggling certain behaviour on/off, I'm using the matchMedia functions. However in the callback function, I need to pass an argument to retain the right reference to this. However, when I try to pass an argument to…
Tim Bakkum
- 83
- 7
2
votes
1 answer
window.matchMedia only working on window refresh
window.matchMedia is working, but I thought it would work like using '@media only screen and' works where when the screen is narrowed it happens. With window.matchMedia the screen has to be loaded or refreshed if you're on a desktop browser for…
Ben Siegfried
- 93
- 1
- 1
- 9
2
votes
1 answer
Difference between matchmedia and enquire js
First of all, I would like to highlight that I am quite a newbie in javascript programming and am trying to learn as much as I can from here. Reading the enquire js api, documentations as well as the sourcecode. I would like to know what is the…
Lionel Koh
- 199
- 1
- 1
- 13
1
vote
0 answers
Should window.matchMedia('(display-mode: standalone)').matches return true in a mobile PWA installed via Firefox?
I'm using the following to detect if the app is running from the installed PWA or the browser version:
if (window.matchMedia('(display-mode: standalone)').matches) {
alert('app is installed');
} else alert('app is not installed');
It…
Shaun
- 2,043
- 3
- 27
- 36
1
vote
2 answers
How to get a reactive matchMedia in Vue 2?
I need to have a reactive global variable in Vue. The variable is simply a boolean that tells me whether the user is on a mobile device. I have tried so many things but this is the last thing I tried:
Vue.prototype.$testIsMobile = false
const…
mcool
- 457
- 4
- 29
1
vote
0 answers
Use matchMedia to enable/disable script like a media query on load/viewport resize
I only want to run a script when the viewport width is greater than a set value. I would also like this to check as the browser resizes and disable/enable as required. I've tried to achieve this using matchMedia and rather than checking every pixel,…
user1406440
- 1,329
- 2
- 24
- 59
1
vote
0 answers
I have a problem calling with my carousel codes, it keeps keeping variables for other conditions
I have tried so many method to stop this error but nothing seems to work, here is a link to my codepen: https://codepen.io/T_manuel/pen/PoKMYVx
when the page loads, I call the function but when I resize the page, Javascript seems to do the new logic…
T manuel
- 11
- 3
1
vote
1 answer
How to update CSS variable within JavaScript matchMedia event
I'm using JavaScript together with a css column-width layout to calculate breakpoints at each new column in the browser window. With each new column I also increase the page margins for which I calculate a second breakpoints so they fit.
I have…
edwinbradford
- 435
- 5
- 20
1
vote
0 answers
Using different GSAP timelines at different breakpoints with matchmedia()
I'm trying to trigger different GSAP timelines at different breakpoints using the window.matchmedia(); method.
I've attempted to put together a simple example here to explain my thinking:
const box = document.querySelector(".box");
const change =…
abbas_arezoo
- 1,038
- 3
- 20
- 38
1
vote
1 answer
how to execute a function that listens for scrollTop AND matchmedia (mql)
I'd like to execute a listener function (that adds class, "cursor-white") that occurs ONLY IF the 2 following conditions are met.
$(window).scrollTop is 0 (at the top of window)
and the window is <= 900px.
Im struggling with getting the logic…
Nish
- 81
- 6
1
vote
0 answers
How to detect invert color mode on user side by JS/JQuery?
I'd like to know about using/unused by user invert color mode (wcag) (standard windows/mac function for visually impaired people )...this mode active or inactive. Is it possible?
I'm trying to use window.matchMedia('(-ms-high-contrast: active)') for…
Martin Eden
- 11
- 2
1
vote
1 answer
React Dark Mode Handler
I have the following code inside my App component.
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
const [isDarkMode, setIsDarkMode] = React.useState(darkMode.matches);
const darkModeChangeHandler = (e) => {
…
Preston
- 167
- 1
- 10
1
vote
1 answer
window.matchMedia("(max-width: 1700px)"); does not work?
Hey friends I'm trying to use window.matchMedia("(max-width: 1700px)") to add some elements in the html when the page is 1700px or smaller. Right now I'mk just trying to test it by have a function alert 'yo' to the screen. This doesn't work as well…
spabsa
- 151
- 1
- 11