CODEWITHSUNDEEP
iphonehtmlcssimage
Matt
Matt

Reputation: 2509

Is the iPhone 4+ displaying images 2x the size if your site doesn't have retina support?

I just started reading about Retina Display on the iphone 4+ and I would like to know if right now all these iphones4+ are displaying images 2x the normal size on web pages if you don't have a the [email protected] ?!

This would be a huge headache if I have to wrote all that extra code like media queries and add @2x after every background images...

If so, what are your swiftest solution? Thank you.

Upvotes: 0

Views: 1040

Answers (2)

Christian Schnorr
Christian Schnorr

Reputation: 10776

Mobile Safari interprets px as points and you therefore don't need to do anything for your app to work on a retina device.

If you want to provide high-res images though, wrap it in a CSS media query:

@media all and (-webkit-device-pixel-ratio:2) {
    #id {
        background-image: url([email protected]);
        background-size: 100% 100%;
    }
}

Upvotes: 3

DA.
DA.

Reputation: 40673

The file name has nothing to do with your web site. You can name your image files anything you want. The '@2x' is just an informal standard many use for retina web images. If you want retina images to be used, you can use the media query to swap out the images via CSS with the higher resolution versions.

http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

Upvotes: 3

Related Questions