media query for galaxy s2

Question

I have developed a responsive theme for my website, By using media queries on my css file.

it works fine on ipad/iphone and small android phones. When i get to galaxy S2 it seems to ignore my media queries.

This is the media query im using to target galaxy s2 and alike - is it correct ? if so , why isnt it working ?

@media only screen and (min-device-width : 480px) and (max-device-width : 800px)

thanks

Answer 1

Your code should work.

Have you tried to add the 'orientation' like:

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) {

}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) {

}

Answer 2

The answers shown are flat out wrong! Samsung devices do NOT have the same resolution in both portrait and landscape modes as Apple devices do. Also, why are you using "min-device-width" and "max-device-width"? Stick to the resolution at hand! You dont want your design displaying inappropriately at the wrong resolution! Do this, I guarantee it works, because I use it all the time:

@media screen and (device-width: 480px) and (device-height: 800px) and (orientation: portrait) { styles } @media screen and (device-width: 800px) and (device-height: 480px) and (orientation: landscape) { styles } Ditch the "only" rule! Its not necessary! Use the "handheld" or "screen" values only!