Geek Answers Handbook

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

To be as concise as possible in styles, I would prefer not to use the media query stylesheet, which is included if my page is viewed by a device with a double pixel density, such as iPhone 4.

As the saying goes, would it be nice 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; }

Will it work in all directions without any flaws? Or should I make some kind of media query for devices with a specific pixel density?

+7
source share
3 answers

Yes Yes. The only drawback is image loading, which is much larger than on retina-free displays. I would recommend that you have retina-free images for everything in the main style sheet (with the background size set for all images), and if necessary use a retina style sheet that redefines all image URLs with links to images with retina size .

This is a bit more work, but people on slow cellular connections will be grateful.

Oh, and your path will also diminish your image for you, which may or may not be entirely normal. If you have 1px wide lines (for example) in the image, this may not decrease as you like. But for most types of images, this is likely to be acceptable.

+9
source

To answer the "media query for devices with a specific pixel density", the answer is yes:

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

+3
source

In addition to the dmackerman message, to enable a media query for a browser other than a website that supports higher densities, you can 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 both give the same result.

+2
source

More articles:


All Articles