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

Every unit you use on a Retina Display is still the same, so all you need to do is replace all images with a 2x version.

You can use window.devicePixelRatio to detect if your web app is running on a Retina Display. If window.devicePixelRatio > 1 then it's a Retina Display. Then you can replace every image on the client-side:

1. search all <img /> and replace src attribute.
2. search all css and replace background-image.
3. if you use canvas, create a 2x density and use 2x images. That means when working with a 100px * 100px <canvas></canvas> element, set its content to be 200px * 200px.

Answer 2

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.

<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">

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:

<img src="retina-images/my-button-40x40.png" width="20" height="20">

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.