I'm currently incorporating CSS sprite sheets into a mobile-friendly page design. The layout appears as intended, and below is the CSS I have implemented (which displays correctly on Chrome Canary's iPhone 3GS emulator):
div#logo {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px 0px no-repeat;
display: inline-block;
width: 90px;
height: 44px;
display:block;
float:right;
margin:10px;
}
div#stars {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -46px no-repeat;
display: inline-block;
width: 71px;
height: 12px;
}
div#iPhone {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') 0px 0px no-repeat;
display: inline-block;
float:left;
width: 112px;
height: 238px;
margin-top: 54px;
}
div#separator {
background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -60px no-repeat;
display: inline-block;
width: 1px;
height: 53px;
}
Upon viewing this on a Retina display, the images appear slightly pixelated. To address this, I followed guidance from this resource on switching sprite sheets for varying display densities and incorporated the following:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dppx) {
div#logo {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px 0px;
}
div#stars {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -91px;
}
div#iPhone {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: 0px 0px;
}
div#separator {
background-image: url('/static/images/iphone/iphone_landing_sprites.png');
background-position: -226px -117px;
}
}
The page continues to display properly on the iPhone 3GS simulator due to the @media switch having no impact. However, observing it in an iPhone 4 simulator shows the images appearing twice their original size. Although the layout remains consistent in terms of frame size, the images get cropped to reveal only the top-left quadrant.
Am I overlooking any additional attributes that need specification to compress the images within double-density pixels while maintaining equal screen dimensions?