Quickly check the CSS Media Queries that work with your device

[wasigh]

CSS media queries are a very powerful tool to create optimized web pages. But which CSS Media query should I use to target my device? This simple page helps to find the right media query.

[gcp]

This seems to encourage the sort of thing CSS Media Queries are exactly made to prevent: trying to detect the device and make some special case code for that, instead of thinking about what is possible given the capabilities.

It's also broken.

The iPad queries should incorrectly trigger on some Android devices, the "SmartPhone" category will be outdated soon. And it fails to detect my desktop.

[gburt]

It only detects iPad in portrait, not landscape... Is that correct?

[geuis]

"Smartphones (portrait)" even though my iPhone is in landscape.

[FreeFull]

Apparently my Thinkpad is an iPad in landscape mode now.

[sedev]

There's no alt text for the images - as a result, when I visit in w3m, I can't actually see whether or not the site thinks I'm on a tty.

[nielsz]

Thanks for all the feedback! I've resolved the iPad landscape error, will refactor some other mediaqueries in the coming days!

[Semiapies]

It thinks my Droid is in landscape mode, even in portrait, and even if I refresh.

[rev087]

It seems to fail the iPad detection.