Quickly check the CSS Media Queries that work with your device

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

21 points by wasigh 14 years ago | 8 comments

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 14 years ago |

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 14 years ago |

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

geuis 14 years ago |

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

FreeFull 14 years ago |

Apparently my Thinkpad is an iPad in landscape mode now.

sedev 14 years ago |

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 14 years ago |

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

Semiapies 14 years ago |

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

rev087 14 years ago |

It seems to fail the iPad detection.