media-match

Test css media queries in javascript. A faster polyfill for matchMedia support.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
media-match
32002.0.37 years ago7 years agoMinified + gzip package size for media-match in KB

Readme

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.