Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

matchMedia polyfill for testing media queries in JS

tree: d003d4511b

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 LICENSE.txt update license to have @scottjehl be the copyright owner October 17, 2012
Octocat-spinner-32 README.md
Octocat-spinner-32 matchMedia.addListener.js
Octocat-spinner-32 matchMedia.js
README.md

matchMedia() polyfill

test whether a CSS media type or media query applies

How about resizing the browser?

Paul Hayes made 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. :)

Usage

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:

Something went wrong with that request. Please try again.