# matchmedia-polyfill

> matchMedia polyfill for testing media queries in JS

Latest version **0.3.2** (published 2019-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install matchmedia-polyfill
pnpm add matchmedia-polyfill
yarn add matchmedia-polyfill
bun add matchmedia-polyfill
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2019-05-07 |
| First published | 2016-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2361 |
| Author | Scott Jehl |
| Maintainers | paulirish, scottjehl |

## Links

- npm: https://www.npmjs.com/package/matchmedia-polyfill
- Repository: https://github.com/paulirish/matchMedia.js
- Homepage: http://github.com/paulirish/matchMedia.js
- Issues: https://github.com/paulirish/matchMedia.js/issues
- npm.io page: https://npm.io/package/matchmedia-polyfill

## Recent versions

- 0.3.2 (latest) — 2019-05-07
- 0.3.1 — 2018-06-13
- 0.3.0 — 2016-01-05

## README

[![npm](https://img.shields.io/npm/v/matchmedia-polyfill.svg)](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)

---
_Source: https://npm.io/package/matchmedia-polyfill · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._