Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulirish/matchMedia.js
matchMedia polyfill for testing media queries in JS
https://github.com/paulirish/matchMedia.js
Last synced: 4 months ago
JSON representation
matchMedia polyfill for testing media queries in JS
- Host: GitHub
- URL: https://github.com/paulirish/matchMedia.js
- Owner: paulirish
- License: mit
- Created: 2011-04-01T19:26:21.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2020-12-22T22:56:49.000Z (almost 4 years ago)
- Last Synced: 2024-05-22T07:01:19.306Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 45.9 KB
- Stars: 2,382
- Watchers: 101
- Forks: 293
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://npmjs.com/package/matchmedia-polyfill)
# matchMedia() polyfill
## test whether a CSS media type or media query applies
## Usage
```js
// Likely want to requier both polyfills..
require('matchmedia-polyfill');
require('matchmedia-polyfill/matchMedia.addListener');
```
#### test 'tv' media type
```js
if (matchMedia('tv').matches) {
// tv media type supported
}
```
### test a mobile device media query
```js
if (matchMedia('only screen and (max-width: 480px)').matches) {
// smartphone/iphone... maybe run some small-screen related dom scripting?
}
```
#### test landscape orientation
```js
if (matchMedia('all and (orientation:landscape)').matches) {
// probably tablet in widescreen view
}
```
## Used in:
* [Respond.js](https://github.com/scottjehl/Respond)
* [FormFactor](https://github.com/PaulKinlan/formfactor)
* [Modernizr](http://www.modernizr.com/)
### How about resizing the browser?
Paul Hayes [tackled this using CSS transitions and their transitionEnd event](http://www.paulrhayes.com/2011-11/use-css-transitions-to-link-media-queries-and-javascript/)
His code: https://github.com/fofr/matchMedia.js -- though currently it doesnt support IE6-9, since they dont have transitions, obviously. :)
----------
* **Authors**: Scott Jehl, Paul Irish, Nicholas Zakas
* **Spec**: [dev.w3.org/csswg/cssom-view/#dom-window-matchmedia](http://dev.w3.org/csswg/cssom-view/#dom-window-matchmedia)
* **Native support**: Chrome [since m10](http://trac.webkit.org/changeset/72552), Firefox [since 6](https://developer.mozilla.org/en/Firefox/Releases/6), and Safari [since 5.1](https://developer.mozilla.org/en/DOM/window.matchMedia#Browser_compatibility)