During my testing of mobile web apps, I have observed that the screen images on the htc desire hd appear blurred, which suggests that the pixel ratio for this screen is 2, the same as the iPhone 4. To address this issue for the iPhone 4, I have included all updated x2 images within my (-webkit-min-device-pixel-ratio: 2) media query. However, I am puzzled as to why the desire hd does not recognize this. Is there something I am overlooking?
@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 utilizes this media query?
Kyle