Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Topic: Handling Retina Display in your web application

If you like this tutorial, click "Like" in the top blue ribbon.
Apple has introduce a brand new screen with the new iPhone 4 which holds 4 times more pixels that the screen of previous versions of the devices.

In order for web applications to render correctly in Mobile Safari, the browser doubles the pixels of every elements of the page. If you rely on border radius or simliar CSS stuff, the elements will fit nicely on the screen, with smooth edges, but as soon as you use images and brackgrounds, pixels become visible and the display is a bit ugly.

Anyway, you can benefit from the new Retina display also for images and backgrounds. For the former you just have to use an image twice as big as the original but set the size of the <img> tag to an half of the new image. For instance if your initial image is 32x32, you have to produce a new one which is 64x64, with good quality -- do not just resize the smaller to bigger. Then you define your images the same way.

<img src="flower.jpg" width="32" height="32" alt="A flower">

Here, the OS will find that the original image has twice more pixels it needs to display, but as it usually doubles pixels size to fit the new screen, it knows that this operation is not required and it will use the full image to show on screen to fill the virtual 32x32 area. The result is that the image is now smooth on Retina.

For backgrounds, you will use the same technique. To do this, you will have to use the new -webkit-background-size CSS property to resize you image.
For instance, using an proper image which is 32x16 pixels, you'll have to produce a 64x32 new image and use:

.bg {
    background-image: url(chevron.png);
    -webkit-background-size: 32px 16px;
}

The OS will then use the same behavior as with images. Now, if you use -webkit-gradient(), you'll notice that the rendering engine already take care of the Retina display and will produce automatically a smoother version of your gradient with no additional change.

If you want to change the image based on the device capabilities, you can also rely on the CSS media queries:

.bg {
    background-image: url(chevron-32x16.png);
    -webkit-background-size: 32px 16px;
}

@media all and (-webkit-min-device-pixel-ratio:2) {
    .bg {
        background-image: url(chevron-hd.png);
    }
}

Or even load a specific CSS:

<link rel="stylesheet" href="retina.css" media="all and (-webkit-min-device-pixel-ratio:2)">

Of course, you can also rely on SVG graphics instead of bitmaps which will remove the need of specific targets since the rendering engine will be able to scale the vectors as needed automatically.

That's it! You are now ready for the Retina display!
If you like this tutorial, click "Like" in the bottom blue ribbon.

We need Amazon reviewers. Please do one!
Book: "Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript" Buy Now! (or review).
/!\ Don't forget to "Like" WebApp.Net from the homepage

Re: Handling Retina Display in your web application

Thanks for this post. I've created some hires-chevrons myself, but do you have a hi-res background for the top bar buttons?

Re: Handling Retina Display in your web application

No, but this is just a gradient easy to reproduce. Better to use -webkit-gradient() instead of image too so that the gradient automatically fit in Retina display without worring about scale.

We need Amazon reviewers. Please do one!
Book: "Beginning iPhone and iPad Web Apps: Scripting with HTML5, CSS3, and JavaScript" Buy Now! (or review).
/!\ Don't forget to "Like" WebApp.Net from the homepage

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /homepages/24/d260627385/htdocs/chrilith.com/forums/include/parser.php on line 738

Re: Handling Retina Display in your web application

I'm talking about the back button, that's got its own shape...

But I solved this in the mean time taking graphics from this GREAT package: iPhone 4 GUI PSD (Retina Display)

Re: Handling Retina Display in your web application

Thanks for the link, floz. Awesome package indeed.