Question

I have been doing some mobile web app testing and have noticed that the htc desire hd screen images all seem to be blurred indicating to me that the pixel ratio for this screen is 2, the same as the iphone 4. I have placed all the updated x2 images within my (-webkit-min-device-pixel-ratio: 2) media query in order to overcome this atleast for the iphone 4 but am surprised that the desire doesnt pick this up also? Is there something Im missing here?

        @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

    /* Social Icons */
    #social-icons{margin:40px 0;}
    #social-icons li{margin-bottom:5px;}
    #social-icons li a{background: url(../img/social-sprite-x2.png); background-position: 0 0; background-repeat: none; background-size: 63px auto; display:block; text-indent: -999em; overflow:hidden; width:63px;height:63px;}

    #social-icons li a.fb{background-position:0 0;}
    #social-icons li a.tw{background-position:0 -75px;}
    #social-icons li a.ms{background-position:0 -150px;}
    #social-icons li a.tn{background-position:0 -226.5px;}
} /* //End Retina **********************************/

Does this mean that only the iphone 4 uses this media query?

Kyle

Answer 1

Read this: http://developer.android.com/reference/android/webkit/WebView.html

Specifically the bit titled ‘Building web pages to support different screen densities’. As far as I’m aware the Desire HD is an HDPI device and therefore has a pixel ratio of 1.5.