CSS media queries for Galaxy S3

Question

Anyone know how to target the Samsung Galaxy S3 with media queries?

Currently I use:

iPad

<link rel="stylesheet" media="all and (device-width: 768px)"                                                href="css/device-768.css"/>

Other tablet devices

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>

Phones (S3 didnt use this - dont know why)

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)"    href="css/phones.css"/>

I also tested

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"    href="css/phones.css"/>

but it didnt work...

Answer 1

I have set up a page that shows you how any device will react to media queries by giving the values of the media features. Just visit the page with the device you want to test:

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

From there, you can decide which media query you want to use based on what the different devices report. Remember it is generally a bad idea to target specific devices. You should rather target display sizes and density to make your website adapt to the surface at hand.