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 displays (320x480).

All iOS devs need to do is supply two sets of assets, one for Retina and one for non-Retina, and design their layouts in relative terms called units. Provided devs follow a certain naming convention, iOS automatically detects the user's screen size and uses the right assets and scales the layout accordingly.

This means devs can serve two user bases with one code base.

Do frameworks exist to help HTML5 devs accomplish the same thing?

What have people done to service non-Retina and Retina displays while minimizing duplicate code?

Thanks!

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.

<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.

Answer 2

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.