Javascript multiple media queries possible?

Question

I'm looking into a way for JavaScript to understand more than one media queries. At this point I've the following code to check the width of the browser, but I want to create more queries. Google (and Stack) only showed me the code I've already written. The only way what I see is to use enquire.js, but I want to know if there isn't another way.

$(function() {
// Screen width check 
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 992px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// Run function mq (check screen width)
function WidthChange(mq) {
    // Screen size +992px
    if (mq.matches) {
        .....
    }
    // Screen size -992px
    else {
        .....           
    }
// End widthChange(mq) function
}
// End Function script
});

So this code will only check for min-width: 992px, but now I want atleast 3 more.

Just to be clear, is your goal to find out the screen width of the user's browser? — Ethan Fischer
– Ethan Fischer, Commented Jan 18, 2016 at 13:03
@EthanFischer No, I want css media queries like media screen (min-width 999px) { } etc in Javascript/Jquery. — elJeffe
– elJeffe, Commented Jan 18, 2016 at 13:10

arc · Accepted Answer · 2016-01-18 13:13:28Z

2

You can match multiple things by either having two (or more) query's or making a joint one.

Multiple query's

function screenIsWide() {
  var mq = window.matchMedia("(min-width: 992px)");
  return mq.matches;
}

function screenIsToWide() {
  var mq = window.matchMedia("(max-width: 9001px)");
  return mq.matches;
}

function isPrint() {
   var mq = window.matchMedia("print");
   return mq.matches;
}

console.log(screenIsWide() + " " + isPrint() + " " + screenIsToWide());

if(screenIsWide() && isPrint() && screenIsToWide()) {
   // do stuff
}

Joint

You can make this really easy just as in normal CSS Read more here w3schools.com

function isScreenAndIsWide() {
  var mq = window.matchMedia("screen and (min-width: 992px)");
  return mq.matches;
}

console.log(isScreenAndIsWide());

edited Jan 18, 2016 at 13:13

answered Jan 18, 2016 at 13:05

arc

4,7515 gold badges37 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript multiple media queries possible?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related