Serving non-Retina and Retina displays with the same code base: a framework for scaling layouts and assets for HTML5 applications on iPhone or iOS devices?

Question

Our goal is to imitate what developers can do with native iOS apps, i.e. Use a single block-based layout to accommodate Retina (640x960) and non-Retina (320x480) displays.

All iOS developers must provide two sets of assets: one for Retina and one for non-Retina, as well as the design of their layouts in relative terms, called units. If developers follow a specific naming convention, iOS automatically determines the user's screen size and uses the right assets and scales the layout accordingly.

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

Is there a framework to help HTML5 developers do the same thing?

What did people do to serve non Retina and Retina mapping while minimizing duplicate code?

Thanks!

Answer 1

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

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

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

Second, feed retina images for all of your images using the CSS background size property. Since your virtual page width is 320 pixels, each pixel is actually 2px by 2px on the retina screen. If you feed a 40x40 image in a 20x20 field, the retina displays will show it as it is, and images without a retina will reduce 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"> 

Perhaps you could do more work to check the actual screen size and serve smaller images for a non-mesh crowd, but I don't think the benefits would be so dramatic.

Answer 2

Each device that you use on the Retina Display remains the same, so all you have to do is replace all the images with the 2x version.

You can use window.devicePixelRatio to determine if your web application is running on the Retina screen. If window.devicePixelRatio > 1 , then this is Retina Display. Then you can replace each image on the client side:

• find all <img /> and replace the src attribute.
• find all css and replace background-image .
• if you use canvas , create a 2x density and use 2x images. This means that when working with the 100px * 100px <canvas></canvas> set its contents to 200px * 200px.