Test css media queries in javascript. A faster polyfill for matchMedia support. Follow the project on Twitter @mediamatchjs.
Pull request Compare This branch is 11 commits behind weblinc:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
LICENSE.txt
README.md
media.css
media.extension.js
media.js
media.min.js

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.min.js/media.js Provides core functionality. Does not contain external javascript library dependencies. ####media.css Contains rules used to determine media query support and get media type. Copy the contents of media.css to include with in your base style sheet or link to media.css.

  • z-index : Used to access Media _typeList array as index. ["screen", "print", "speech", ...]
  • width : Used to retrieve dpi for non-IE broswers. IE supports screen.DPIX.
  • height : Used to test media query support. IE <9 handle media type but not query expression.

Optional

####media.extension.js Provides method of extending Media.features support. For example, Media supports device-pixel-ratio using the more standard resolution dppx but some projects may have implementations already using device-pixel-ratio. media.extension.js provides the space for this kind of feature support.

Example

Both code blocks are valid uses of this library. Each example shows the caching of a MediaQueryList object and addListener support. The addListener method is part of the MediaQueryList object, therefore it can be add on the cached version or immediately after matchMedia() or match().

#####Standard matchMedia polyfill implementation

<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>
    */
    
    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>

#####Media-match implementation

<script type="text/javascript">
    var mql = Media.match('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>
    */
    
    Media
        .match('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.