Menu icon Foundation
Determine screen-size media query using Javascript

Is there an easy way to determine which breakpoint "mode" is currently in place using Javascript?

For example I am using SASS to set the view according to the $small-only, $medium-only etc. variables. However if the user has resized the browser and the $small-only breakpoint is being used I'd like to be able to query this in Javascript. So something like the following:

if ($small) {
    // do something
} else {
    // do something different
}
            

         

media queryjavascriptjsscreen size

Is there an easy way to determine which breakpoint "mode" is currently in place using Javascript?

For example I am using SASS to set the view according to the $small-only, $medium-only etc. variables. However if the user has resized the browser and the $small-only breakpoint is being used I'd like to be able to query this in Javascript. So something like the following:

if ($small) {
    // do something
} else {
    // do something different
}
            

         
Karl Ward almost 6 years ago

can't just just check for width directly in JS? Even if you do have the breakpoints stored as variables, your condition would look similar. Sounds to me like you just want to use the variables assigned in sass, so you don't need to manually track them in JS, but it doesn't work like that.

You can use Modernizr media queries in JS:
http://modernizr.com/docs/#mq

If you are ambitious, you could make a js function with modernizr mq, that basically sets a variable of the state of the screen, similar to the css breakpoints defined. However, the logic behind a breakpoint is that something changes when the screen is below or above a breakpoint ... that can't always be translated into a "state", which you seem to be aiming for, unless you have specific usage.

Craig Myles almost 6 years ago

I've actually decided to place a div on the screen and hide it. I then set the "font-family" depending on the media query in place, setting the font-family to "small", "medium", "large" etc. I then check to see what the font-family is set as to determine the screen size. It's not perfect but it uses the same logic as https://github.com/JoshBarr/on-media-query/ and saves me having to store two sets of breakpoint variables.

Steve Hall almost 6 years ago

I too would love an elegant solution to this. Perhaps add a class to the html element which I can then pick up in jQuery? I don't like the thought of just hard-coding numbers into my JS, especially when the default media queries are expressed in ems... but then I guess the distance between Sass and JS is a weird gap to bridge. I might go with Craig's solution for now...

Karl Ward almost 6 years ago

Keep in mind, in a modern "mobile first" responsive layout that comes with Foundation, there is not a single active breakpoint. For example, on a "large" screen, active breakpoints would be small-up, medium-up, large-up and large-only. This does not translate nicely to JS, although you could easily have a custom JS simply add all those classes to the body or head html elements.

Martin Hein almost 6 years ago

Maybe it´s not such an elegant solution but you could do the following.

Insert some kind of breakpoints in your html:

  <div id="breakpoints"> 
        <div class="breakpoint-small" data-size="small"></div>
        <div class="breakpoint-medium" data-size="medium"></div>
        <div class="breakpoint-large" data-size="large"></div>
  </div>

In your media-queries you can set the visibility of each breakpoint:

#breakpoints {

    height:0px;

    div {
        width:1px;
        height:0px;
        visibility:hidden;

        &.breakpoint-small {
            display:block;
        }
        &.breakpoint-medium,
        &.breakpoint-large {
            display:none;
        }
    }

}

And then you can check the visibility of your breakpoints in JS (supposing jQuery):

$(window).resize(function(event){
     var size = $('#breakpoints div:visible').first().data('size');
     //do something with your size
}); 

Mauricio Usuga Castro over 5 years ago

Yes. Take a look at how foundation.dropdown.js (line ~169) does it:

    // is this a small screen?
    function isSmall() {
      return matchMedia(Foundation.media_queries.small).matches &&
        !matchMedia(Foundation.media_queries.medium).matches;
    }

Karl Ward over 5 years ago

Just for the record, Foundation now includes a javascript utilities to detect states:
http://foundation.zurb.com/docs/javascript-utilities.html#media-queries

Anselm Christophersen about 5 years ago

Based on code here in the forums I ended up building a plugin for this: https://github.com/CPHCloud/foundation-javascript-mediaqueries

Micah Alcorn about 3 years ago

As of Zurb 6, you simply `Foundation.MediaQuery.current`.

 

See: http://foundation.zurb.com/sites/docs/javascript-utilities.html