getCurrentMediaQuery

getCurrentMediaQuery

description

Returns the current media query in use by looking at the font-family of the head of the document and text in pseudo content on the body. Useful for running JS functions at certain breakpoints without holding breakpoint size information in CSS and JS.

requires

• specific HTML

parameters

• none

returns

• media query string as a string

example usage:

var mq = getCurrentMediaQuery(); // returns 'large' (if viewport at large size)

CSS required

body:after {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  width: 1px;
  height: 1px;
  margin: -1px 0 0 -1px;
  position: absolute;
  left: -1px;
  top: -1px;
}
@media (max-width: 767px) {
  head {
    font-family: 'small';
  }
  body:after {
    content: 'small';
  }
}
@media (max-width: 768px) {
  head {
    font-family: 'medium';
  }
  body:after {
    content: 'medium';
  }
}