• Stars
    star
    2,382
  • Rank 18,657 (Top 0.4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 13 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

matchMedia polyfill for testing media queries in JS

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


More Repositories

1

lite-youtube-embed

A faster youtube embed.
JavaScript
4,633
star
2

dotfiles

paul's fish, bash, git, etc config files. good stuff.
Shell
4,106
star
3

git-open

Type `git open` to open the GitHub page or website for a repository in your browser.
Shell
3,275
star
4

memory-stats.js

minimal monitor for JS Heap Size via performance.memory
JavaScript
2,087
star
5

pwmetrics

Progressive web metrics at your fingertipz
TypeScript
1,247
star
6

break-on-access

break on access to a property
JavaScript
1,146
star
7

github-email

Get a GitHub user's email. 😎 Use this responsibly.
Shell
982
star
8

git-recent

See your latest local git branches, formatted real fancy
Shell
917
star
9

automated-chrome-profiling

Node.js recipes for automating javascript profiling in Chrome
JavaScript
863
star
10

speedline

Calculate the speed index from devtools performance trace
JavaScript
789
star
11

headless-cat-n-mouse

Is headless chrome currently detectable? Let's pit the detections and detection evasions against eachother.
JavaScript
637
star
12

css3please

use Autoprefixer instead. <3
JavaScript
388
star
13

frontend-feeds

OPML of the frontend development rss feeds
348
star
14

devtools-addons

see the wiki
292
star
15

devtools-timeline-model

Unsupported
JavaScript
172
star
16

w3fools

CSS
151
star
17

harmony

Procedural Drawing Tool - my fork reduces it down to be integrated elsewhere
JavaScript
145
star
18

es-modules-todomvc

ES modules demo app
JavaScript
127
star
19

sample-devtools-theme-extension

A sample devtools theme extension using the new API
CSS
113
star
20

web-feature-availability

estimating the % of web users that have certain web features natively supported
HTML
91
star
21

adb_trace

Android Debug Bridge + Chrome Tracing
Python
86
star
22

trace.cafe

easy webperf trace sharing
JavaScript
84
star
23

lh-scorecalc

Lighthouse perf score calculator - explaining how the perf score is composed
JavaScript
82
star
24

emulation-popup-ext

chrome extension for devtools device emulation of your current page
JavaScript
75
star
25

covfefe-coverage

Node API for DevTools JS Coverage data
JavaScript
66
star
26

mojibar-web

JavaScript
63
star
27

chrome-side-tabs-extension

Restored source of Adrian Lungu's awesome Chrome Side Tabs extension
JavaScript
57
star
28

html5readiness.com

visualization of html5 and css3 features and when they are implemented
HTML
57
star
29

font-face-detect

Detect if @font-face support is present in the browser.
JavaScript
54
star
30

commitlintbot

JavaScript
53
star
31

third-party-decode

Decode URLs into 3rd party companies & products.
JavaScript
52
star
32

caltrainschedule.io

πŸš„ caltrain schedules - offline first 🐬
HTML
51
star
33

39ridiculousboxshadows

39 totally ridiculous box shadows
JavaScript
51
star
34

jQuery-miniplugins

assorted snippets and plugins
JavaScript
51
star
35

google-hangouts-grid-view

chrome extension to get a basic grid view in Google Hangouts
JavaScript
46
star
36

request-capture-har

Wrapper for request module that saves all traffic as a HAR file.
JavaScript
40
star
37

mothereffingtextshadow

CUZ WE NEED SOME MOTHER EFFING TEXT SHADOW
JavaScript
37
star
38

statikk

A simple and secure server for static files.
JavaScript
36
star
39

viewport-width-visualization

what do the widths and devices of responsive design look like?
JavaScript
21
star
40

c-cli

Give your `cat` command some color
JavaScript
19
star
41

jQuery-plus

A collection of addons/plugins for jQuery - mostly overloaded jQuery methods...
JavaScript
19
star
42

pidgey-grinding

pokemon go max XP calculator thang thang
HTML
18
star
43

mothereffinghsl

we 'bout to get HSLazy up in this!!
JavaScript
15
star
44

demo

i have a /demo/ URL on my domain. this is it.
JavaScript
13
star
45

gmail-popup-extension

opens gmail in a popup window. Nice if you open a lot of new tabs from it. chrome extension. it's dirty.
JavaScript
13
star
46

email2feed

a google app engine service that takes email at [email protected] and serves a feed at domain.com/foobar
Python
12
star
47

tiny-demos-on-https

can't do a jsbin on HTTPS but sometimes you need it. gh-pages to the rescue.
HTML
12
star
48

Chrome-LikeBlock

A Chrome extension (and greasemonkey script) to block the Facebook Like buttons
JavaScript
11
star
49

fusejs

Alpha version of FuseJS
JavaScript
10
star
50

lite-googlemaps-embed

HTML
9
star
51

npm-publish-devtools-frontend

Shell
9
star
52

timeline-totals

summarize cost of all operations recorded by the devtools timeline
JavaScript
8
star
53

source-map-js

fork of 7rulnik/source-map-js (which is ultimately a fork of mozilla/[email protected] (pre-wasm))
JavaScript
7
star
54

Gmail-mailing-list-permalink-chromeext

Get a permalink of the mailing list message you're looking at in gmail
JavaScript
7
star
55

gf3hairday

ITS FUCKING GLAMOUROUS FEBRUARY 3rd!
7
star
56

CopyLink-extension

Copy link to current page into the clipboard
JavaScript
7
star
57

package-underscore

JavaScript
6
star
58

mydevice

what are my device specs ?
HTML
6
star
59

server-trace-injector-extension

JavaScript
6
star
60

package-backbone

JavaScript
5
star
61

netlogbytes

JavaScript
4
star
62

trace-stuff

JavaScript
4
star
63

lh-build-tracker

build size history for Lighthouse
JavaScript
3
star
64

bot-t-factoids

factoids from temp01's bot-t. RIP bot-t. <3
3
star
65

badge-gdrive-favicons-extension

JavaScript
2
star
66

dadi

Automatically exported from code.google.com/p/dadi
Python
2
star
67

node-imageview

preview images in a browser and set their data uri in an input field
JavaScript
2
star
68

sourcesnapper

exploring an idea
JavaScript
2
star
69

aoe-tech-tree-widget

JavaScript
1
star
70

chromedot

Some notes on chrome subsystems
Makefile
1
star
71

filesystem-api-explorer

Filesystem API explorer - chrome extension
JavaScript
1
star
72

cri-request-interception

JavaScript
1
star