Question

If I use max-device-width does that include landscape mode?

Say I use it to detect iPhone 4, should I use max-device-width: 640px or 960px? I need to get 3 resolutions: 480x320, 960x640 and 854x480. What would be the best way to query for them using @media

My take was:

@media screen and (max-device-width: 480px) {}
@media screen and (min-device-width: 481px) and (max-device-width: 854px) {}
@media screen and (min-device-width: 855px) and (max-device-width: 960px) {}

Answer 1

Here is some Css to help you:

// target small screens (mobile devices or small desktop windows)  
@media only screen and (max-width: 480px) {  
  /* CSS goes here */  
}  

/* high resolution screens */  
@media (-webkit-min-device-pixel-ratio: 2),  
             (min--moz-device-pixel-ratio: 2),  
             (min-resolution: 300dpi) {  
  header { background-image: url(header-highres.png); }  
}  

/* low resolution screens */  
@media (-webkit-max-device-pixel-ratio: 1.5),  
             (max--moz-device-pixel-ratio: 1.5),  
             (max-resolution: 299dpi) {  
  header { background-image: url(header-lowres.png); }  
}  

Have a read through this link it should solve your problem

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript