Quickly check the CSS Media Queries that work with your device

#1

Post by wasigh » Fri, Nov 04, 2011, 4:00 PM UTC

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.

Quickly check the CSS Media Queries that work with your device
cssmediaqueries.com

Re: Quickly check the CSS Media Queries that work with your device

#2

Post by rev087 » Fri, Nov 04, 2011, 5:30 PM UTC

It seems to fail the iPad detection.

Re: Quickly check the CSS Media Queries that work with your device

#3

Post by gburt » Fri, Nov 04, 2011, 6:10 PM UTC

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

Re: Quickly check the CSS Media Queries that work with your device

#4

Post by gcp » Fri, Nov 04, 2011, 6:19 PM UTC

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.

Re: Quickly check the CSS Media Queries that work with your device

#5

Post by FreeFull » Fri, Nov 04, 2011, 6:49 PM UTC

Apparently my Thinkpad is an iPad in landscape mode now.

Re: Quickly check the CSS Media Queries that work with your device

#6

Post by geuis » Fri, Nov 04, 2011, 7:26 PM UTC

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

Re: Quickly check the CSS Media Queries that work with your device

#7

Post by Semiapies » Fri, Nov 04, 2011, 7:32 PM UTC

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

Re: Quickly check the CSS Media Queries that work with your device

#8

Post by nielsz » Fri, Nov 04, 2011, 8:19 PM UTC

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

Re: Quickly check the CSS Media Queries that work with your device

#9

Post by sedev » Sat, Nov 05, 2011, 3:45 AM UTC

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.