I am currently working on the development of a basic web app for iPhone and Android using phonegap. I am facing some challenges with providing high-resolution images for newer Android devices. My initial thought was to use the same images created for the iPhone 4, which are stored in a separate CSS file and controlled by the following media query:
media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)"
Within this query, there are multiple CSS rules like:
.homepage-list li.about { background-image: url(../images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1888f878ea1d399cf918f86">[email protected]</a>); -webkit-background-size: 35px 35px; }
However, when testing on both the Android emulator and a real HTC Desire HD device, the images do not display, while they show up on an iPhone 4. Interestingly, if I add a border to the rule above, the border appears. So it seems like the media query is being recognized, but still, the images are not showing.
I am a bit stuck on how to resolve this issue. Any help or suggestions would be greatly appreciated!
Thank you in advance!