CODEWITHSUNDEEP
cssmacosmedia-queriesretina-display
Mehar
Mehar

Reputation: 2228

Replace background image for retina ready devices

I have a background image that looks fine in windows operating system but it looks cloudy and stretched in retina ready devices. Now I want to replace the background with a high resolution image in retina ready devices. What is the best way to implement that? Either media queries or using javascript or anything else?

Upvotes: 1

Views: 399

Answers (1)

Timmah
Timmah

Reputation: 1335

You can generally target high DPI (Dots Per Inch) displays using Media queries like this:

@media only screen and (min-device-pixel-ratio: 2) {
    /* high-DPI stuff here */
}

Just be aware that this will target anything that meets the ratio requirement.

If you want to target Retina displays specifically, you'd need to add something to make the media query more specific. Here's how Chris Coyier does it:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

All these different targeting methods have different levels of support, so it's useful to know a few.

There may already be several devices that meet these conditions, so you could target it another way by using extra conditions to make it even more specific.

For example, to target the Retina iPhone 5/5S/5C for example, you could use this:

@media (-webkit-min-device-pixel-ratio: 2) and (width:640px) and (orientation:portrait) { 
    /* Retina-specific stuff here */
}

@media (-webkit-min-device-pixel-ratio: 2) and (width:1136px) and (orientation:landscape) { 
    /* Retina-specific stuff here */
}

But as always, it's not recommended to target specific devices, it's a never-ending workload.

Upvotes: 1

Related Questions