Testing css media queries in javascript faster than native window.matchMedia, perhaps.
JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 8 commits ahead, 10 commits behind weblinc:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE.txt
README.md
media.match.js
media.match.min.js
test.html

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.