Serving non-Retina and Retina displays with one code base: framework for scaling layouts and assets for HTML5 apps on iPhones or iOS devices?

Question

Our goal is to emulate what developers can do with native iOS apps: that is, use a single layout, based on units, to accommodate Retina displays (640x960) and non-Retina dis

Answer 1

There are two simple things you can do to make your pages work in both modes.

First, you set your viewport with a meta tag in the document head. This will give you a page width of 480 in landscape and 320 in portrait. You can check what orientation you're in using CSS media queries.

Second, serve up retina images for all your images using the CSS background-size property. Since your virtual page width is 320px, each pixel is really 2px by 2px on a retina display. If you serve up a 40x40 image in a 20x20 box, retina displays will show it as is, and non-retina displays will scale down the pixels.

.my-button {
    width:  20px;
    height: 20px;
    background-image: url(retina-images/my-button-40x40.png);
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px;
}

This should also work if you use an image tag:

You could probably do more work to check the actual screen size and serve up smaller images for the non-retina crowd, but I don't think the benefit will be that dramatic.