CODEWITHSUNDEEP
androidcssiosmobilemedia-queries
styler
styler

Reputation: 16501

htc desire hd fails to pick up (-webkit-min-device-pixel-ratio: 2) media query?

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

Upvotes: 2

Views: 1204

Answers (2)

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14774

I know I'm a bit late to the party on this one, but in addition to the correct answer given above, here is the CSS that I use at the moment to handle these HD devices:

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

/* Your styles here. */

}

Just hope this comes to help someone in future. Cheers!

Upvotes: 2

D.T. Atkinson
D.T. Atkinson

Reputation: 98

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.

Upvotes: 3

Related Questions