Media.match

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

Why?

• Browser support: Tested in IE 6-9, Chrome, Firefox, Opera, Safari, iOS and Android
• Feature support: Has all the basics + most of the spec http://www.w3.org/TR/css3-mediaqueries/
• Speed: In many browsers, ops/sec rival or exceed native matchMedia. See 'test' to run your own speed tests using JSLitmus or check out http://jsperf.com/matchmedia/11 and http://jsfiddle.net/wV9HZ/2/
• Size: 2.73KB minified (1.46KB gzipped)

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.