what is the most accurate way to query target mobi

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

Answer 2

The device-width and device-height media query features (along with their min/max prefixes) essentially provide the screen resolution of a mobile device.

On an iPhone, regardless of the generation or presence of a Retina display device-width:

• Is always 320px in portrait mode
• Is always 480px in landscape mode

Using JavaScript, we can get the viewport's width:

<script>
    // Alert Mobile Device Width
    alert(document.documentElement.clientWidth);
</script>

Media queries targeting 320px screens still work on iPhone 4, due to Mobile Safari utilizing a 'device to pixel ratio' density of 2.

For example, when the iPhone 4 browser viewport is equal to the device width, 1 CSS pixel actually translates to 2x2 device pixels.

There is a distinct difference between a device (screen) pixel and a pixel that we typically define in CSS. For a detailed explanation, see High DPI Web Sites.

This is largely good news for Mobile Web Developers, as very little needs to be done to mobile stylesheets for iPhone 4 and Retina displays — since device pixels are translated to CSS pixels automatically.

On a related note, iOS 4 (and iPad with iOS 3.2) introduced orientation to help with detecting orientation change. As soon as the iPhone/iPad detects the orientation changing, it will execute any CSS matching the respective media query.

Consider the following orientation detection example:

@media screen and (orientation: portrait) {
    .box { background: red; }
}

@media screen and (orientation: landscape) {
    .box { background: yellow; }
}

The same functionality can be accomplished (or combined with) using width and device-width to trigger portrait vs. landscape modes:

@media screen and (max-width: 320px) {
    /* Portrait Mode */
    .box { background: red; }
}

@media screen and (min-width: 321px) and (max-device-width: 480px) {
    /* Landscape Mode */
    .box { background: yellow; }
}

The orientation media feature is portrait when the value of the height is greater than or equal to the value of the width — otherwise orientation is landscape.

As illustrated, max-width and min-width are updated when you rotate the screen — so max-width in portrait mode becomes max-height in landscape mode.

---

For reference, here's the screen size and resolutions of the iPhone and iPad:

iPhone 2G, 3G, 3GS (3.5" diagonal, 163 ppi)
    Portrait: 320x480
    Landscape: 480x320

iPhone 4, 4S (3.5" diagonal, 326 ppi)
    Portrait: 640x960
    Landscape: 960x640

iPad 1, 2 (9.7" diagonal, 132 ppi)
    Portrait: 768x1024
    Landscape: 1024x768