Is using the css3 'background-size' property sufficient for retina display?

To be as succinct with styles as possible, I'd rather not use a media query stylesheet that is included if my page is viewed with a double-pixel-density device such as the iPhone 4.

That bei开发者_如何学Pythonng said, would it be ok if I just did something like this?

.icon-1 {
  background-image: url('my-image-64px.png');  // This image is 64 x 64
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px 32px;
}

Would this work across the board without any drawbacks? Or should I do some sort of a media query for devices with a certain pixel density?

---

Yes it would. The only drawback is downloading an image that is much larger than it needs to be on non-retina displays. I would recommend that you have non retina images for everything in the main stylesheet (with background size set for all images), and include a retina stylesheet as necessary that overrides all image urls with links to retina sized images.

It's a bit more work, but people on slow edge cellular connections will thank you.

Oh, and your way will also downsample your image for you, which may or not be ok. If you have 1px wide lines (for example) in the image, it may not downsize in a way that you find pleasing. But for most types of images, it will probably be acceptable.

---

To answer your "media query for devices with certain pixel density", the answer is yes:

media='only screen and (-webkit-min-device-pixel-ratio: 2)

---

In addition to dmackerman's post, to include a media query for non-webkit browser supporting higher densities, one could write:

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

}

or

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

}

which are both producing the same outcome.