matchmedia-polyfill

0.3.2 • Public • Published

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. :)


Readme

Keywords

none

Package Sidebar

Install

npm i matchmedia-polyfill

Weekly Downloads

52,212

Version

0.3.2

License

MIT

Unpacked Size

7.75 kB

Total Files

5

Last publish

Collaborators

  • paulirish
  • scottjehl