GitXplorerGitXplorer
p

matchMedia.js

public
2369 stars
289 forks
7 issues

Commits

List of commits on branch master.
Unverified
3508a0aed9a4fad326b69af6fcf6a0da52d84984

v0.3.2

ppaulirish committed 6 years ago
Unverified
1e8263fb7968342eba7aa2262a935c5f7d91df9e

Update package.json (#83)

committed 6 years ago
Verified
cd9df4c529a3c5c95c6d66b77bb7cc3d2419c460

readme: add require() hint

ppaulirish committed 7 years ago
Unverified
b9f5997b51965e317c24ad17d1128616cee80c3b

0.3.1 for bower

ppaulirish committed 7 years ago
Unverified
00a33d9d97c2e496b48cef2d7186007872352bcb

v0.3.1

ppaulirish committed 7 years ago
Unverified
b4060ba5ac7afa7f18bf9b2b55e3b8f18b0306f0

Remove BSD license references (#81)

ppaulirish committed 7 years ago

README

The README file for this repository.

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