Skip to content
matchMedia polyfill for testing media queries in JS
JavaScript HTML
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README.md
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.