Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

media queries #49

Closed
mattwiebe opened this Issue · 7 comments

3 participants

@mattwiebe

adding support for CSS media queries might be cool.

@paulirish
Owner

would this basically be .. which media queries are currently accepted in the given view?

here's a good start
http://andreehansson.se/stuff/ahpi/css.media.support/css-media-support.html

we also have a few more over here
http://github.com/paulirish/frontend-pro-template/blob/master/css/style.css

matt, if you have more details on how this would work, i'd love to hear 'em

@mattwiebe

Gee, that was the most uninformative request evar.

My main use-case for this were the becoming-much-more-relevant screen queries being used for mobile browsers, like device-width, max-device-width and especially orientation. Exactly the stuff you're using in your frontend-pro-template.

I think the main one is orientation though - especially if the iPhone continues not to support it: http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html

@paulirish
Owner

Scott Jehl has an implementation that requires document.body

http://gist.github.com/414657

@scottjehl

Here's an updated version of the function that no longer needs document.body
http://gist.github.com/414657

@paulirish
Owner

And looks like Opera did this a bit ago:
http://devfiles.myopera.com/articles/219/testMediaQuery.js

and Chrome supports window.media.matchMedia .. e.g.:
alert(window.media.matchMedium('(device-width: 1680px)'));
http://www.quirksmode.org/blog/archives/2010/08/combining_media.html#c14537

Maybe it makes sense to adapt Scott's to be a fallback solution for window.media.matchMedia ..
Right now I prefer its offsetWidth check vs having to use getComputedStyle (in Operas)

@paulirish
Owner

Okay so I went ahead and did it:

window.media.matchMedium fallback http://gist.github.com/513213

Oddly Chrome 5 supports matchMedium but Chrome 6 doesnt.

@paulirish
Owner

closing this ticket for now.. we're linking it up on the wiki:
http://github.com/Modernizr/Modernizr/wiki/Home/

thanks everyone. this'll go into the Modernizr 2.0 ecosystem of tests... somehow. :)

@paulirish paulirish reopened this
@paulirish paulirish closed this in f1ea262
@patrickkettner patrickkettner referenced this issue from a commit in patrickkettner/Modernizr
@paulirish paulirish media queries test. EZ PZ. fixes #49 ffabc4f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.