CSS background images are blurred on mobile device

Question

Setup:

<meta name="viewport" content="width=device-width, 
                      initial-scale=1, maximum-scale=1.0, user-scalable=no"/> 

I have created a 480 dpi sprite with buttons. Its dimensions are about 2000px * 1000px. In emulator with a css pixel ration of 2 which must be equal to 320 dpi the css images look fine.

.button-logo {
    background: url(../assets/img/sprite_480.png) no-repeat !important;
    background-position: -4px -139px !important;
    background-size: 790% !important;
}

However when I test them on real device with 320 dpi the images are blurred. Any idea why the images get blurred on device?

When I add

target-densitydpi=device-dpi

to meta tag the problem is fixed on device, however target-densitydpi was removed from webkit, see http://trac.webkit.org/changeset/119527 So I cannot use it.

Any ideas how to solve this problem? I am building an application with phonegap for android

Answer 1

This may help, when creating images for HD displays such as the retina display on an iPhone, the DPI isn't really the issue. It's more about the image size itself. If your button is going to display as 50x50 pixels then the image you create should be 100x100 pixels. Then in your CSS set the background-size:50px;

It must be a 2x ratio in order for it to show crystal clear.