Skip to content
Test css media queries in javascript. A faster polyfill for matchMedia support. Follow the project on Twitter @mediamatchjs.
JavaScript HTML
Branch: master
Clone or download

Latest commit

Curt Howard
Curt Howard Update README
Latest commit 2ab69d8 Oct 6, 2017

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Added gitignore Dec 16, 2012
LICENSE.txt Initial commit Dec 3, 2012
README.md Update README Oct 6, 2017
bower.json Release version 2.0.3 Apr 9, 2017
media.match.js Release version 2.0.3 Apr 9, 2017
media.match.min.js Release version 2.0.3 Apr 9, 2017
package.json Add package.json Oct 6, 2017
test.html Major rework of media query parsing. Incorrectly formatted queries wi… Jan 30, 2013

README.md

Media.match

Test css media queries in javascript. A faster polyfill for matchMedia support. Follow the project on Twitter @mediamatchjs.

Why?

Media type and feature support

  • type: all, screen, print, speech, projection, handheld, tv, braille, embossed, tty
  • width: width, min-width, max-width
  • height: height, min-height, max-height
  • device-width: device-width, min-device-width, max-device-width
  • device-height: device-height, min-device-height, max-device-height
  • aspect-ratio: aspect-ratio, min-aspect-ratio, max-aspect-ratio
  • device-aspect-ratio: device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio
  • orientation: orientation
  • resolution: resolution, min-resolution, max-resolution
  • device-pixel-ratio: device-pixel-ratio, min-device-pixel-ratio, max-device-pixel-ratio
  • color: color, min-color, max-color
  • color-index: color-index, min-color-index, max-color-index

Lacks support

  • monochrome: monochrome, min-monochrome, max-monochrome
  • scan: scan
  • grid: grid

Requirements

media.match.min.js/media.match.js

  • Provides core functionality. Does not contain external javascript library or css dependencies.
  • Version 1 of this project contained a css dependency that is now solely handled by media.match.js. See branch, "version1" for previous iteration.

Example

Both code blocks are valid uses of matchMedia(). The first example shows the caching of a MediaQueryList object and the second shows an alternative usage as well as addListener support. The addListener method is part of the MediaQueryList object, therefore it can be added on the cached version or immediately after matchMedia().

<script type="text/javascript">
    var mql = window.matchMedia('screen and (color) and (orientation: landscape) and (min-width: 600px) and (min-height: 400px)');
    //console.log(mql);
    /*
        mql has the following properties:
        matches         : <Boolean>
        media           : <String>
        addListener     : <Function>
        removeListener  : <Function>
    */
</script>
<script type="text/javascript">
    window.matchMedia('screen and (min-width: 600px) and (min-height: 400px), screen and (min-height: 400px)')
        .addListener(function(mql) {
            if (mql.matches) {
                // Media query does match
            } else {
                // Media query does not match anymore
            }
        });
</script>

Related projects

  • Nonresponsive: Media queries for the unsupportive IE6-8.
  • Picture: Responsive images based on the 'picture' element proposal.
  • Img-srcset: Responsive images based on the 'srcset' attribute proposal.
You can’t perform that action at this time.