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
1
vote
0 answers
Why does .matchMedia not work in these certain conditions?
I am making a page that uses buttons to display the content when the creen is wider than 500px, and then it moves to an 'accordion' style layout when the screen is smaller than 500px.
I am using event listeners and match media along with an if/else…
Tom M
- 127
- 2
- 14
1
vote
1 answer
How do I customize the screen definition?
Good day!
Found a script on the network to determine the screen size, but I can not figure out how to correctly set the definition isMobile, isTablet, isDesktop.
function() {
var i = {
mobile: "mobile",
tablet: "tablet",
…
paveell
- 33
- 6
1
vote
1 answer
matchMedia / Javascript Media Query Issue
I created this function to handle the toggle for my mobile nav.
const mobileNav = document.getElementById('mobile-nav');
let tabs = document.getElementsByClassName('nav_tabs');
//nav toggle control
mobileNav.onclick = (event) => {
…
TYPOI
- 361
- 2
- 6
- 19
1
vote
1 answer
Conditional Media Queries window.matchMedia
I am working with window.matchMedia(), and I cannot seem to get the function to apply a secondary class when a max or min width is reached. I've recreated the problem below with a simple font-size change.
I've read up on matchMedia() and I've…
Theodore Steiner
- 1,553
- 2
- 23
- 34
1
vote
1 answer
Headless browsers not honouring view port in matchMedia queries
I have been playing with phantomJS for a while and I came across problems when using it in websites that use matchMedia queries to distinguish device types.
For a while I thought that was a phantom problem but it is happening with other headless…
Jose Brandao
- 111
- 8
1
vote
0 answers
JavaScript - conflicting matchMedia queries
have a fixed vertical dot navigation that fades in when the user scrolls to a certain section on the site so that they can see how many sections there are past that point and can navigate accordingly. If the user then scrolls back up past that point…
Marc
- 348
- 1
- 3
- 9
1
vote
1 answer
JS matchMedia if-statement
I'm trying to trigger my fancybox for viewports >=768px and trigger my swipebox for viewports <768px.
Unfortunately neither one opens now... what am I missing?
Thanks for your help!
I have tons of CSS thus I'm just adding the JS (I'm quite sure it's…
Ollie
- 542
- 7
- 18
1
vote
1 answer
jQuery load function or matchMedia or .css() function not working
Can someone please help and explain why the following code doesn't work? I can't seem to figure out why... to me, everything should be working.
jQuery(window).load(function($){
if (window.matchMedia("(min-width: 768px)").matches) {
var…
Stephen Starzyk
- 45
- 6
1
vote
0 answers
JS if/else statement to adjust window height not working
Short Version: Do you see any errors in this if/else statement?