Skip to content

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

License

Notifications You must be signed in to change notification settings

weblinc/media-match

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •