mp

matchmedia-polyfill

matchMedia polyfill for testing media queries in JS

Showing:

Popularity

Downloads/wk

70.3K

GitHub Stars

2.4K

Maintenance

Last Commit

3yrs ago

Contributors

27

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

npm

matchMedia() polyfill

test whether a CSS media type or media query applies

Usage

// Likely want to requier both polyfills..
require('matchmedia-polyfill');
require('matchmedia-polyfill/matchMedia.addListener');

test 'tv' media type

if (matchMedia('tv').matches) {
  // tv media type supported
}

test a mobile device media query

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}

test landscape orientation

if (matchMedia('all and (orientation:landscape)').matches) {
  // probably tablet in widescreen view
}

Used in:

How about resizing the browser?

Paul Hayes tackled this using CSS transitions and their transitionEnd event

His code: https://github.com/fofr/matchMedia.js -- though currently it doesnt support IE6-9, since they dont have transitions, obviously. :)


Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial