8

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!

Crashalot
  • 33,605
  • 61
  • 269
  • 439

2 Answers2

17

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.

Andrei
  • 10,918
  • 12
  • 76
  • 110
Brian Nickel
  • 26,890
  • 5
  • 80
  • 110
  • Thanks, Brian! What about layouts? Should we use em CSS units for spacing between elements instead of percentages? – Crashalot Oct 11 '11 at 23:59
  • 1
    That depends a lot on what you're trying to do. If you have two elements next to each other that take up 48% of the screen each, the gap will increase when you rotate the phone to landscape. I would recommend having them take up 50% each but then padding them with em or px or anything really. With the viewport, you have pretty much guaranteed that 1px will be the same size on all devices so you don't really have to worry as much about dimensions relative to font size as you would on other platforms. – Brian Nickel Oct 12 '11 at 17:01
  • One thing to keep in mind is that on some (Android) devices, 50% + 50% > 100% or even 33% * 3 > 100%. Often people will place divs next to eachother using display:inline-block which is a flow layout that will spill to the next line on these devices. I always recommend using absolute positioning or display:table-cell for this kind of layout construction. – Brian Nickel Oct 12 '11 at 17:04
6

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.
Cat Chen
  • 2,387
  • 17
  • 12
  • if you use media queries, you dont need to "replace" you can just make a special setup that detects dpi and then overrides the backgrounds. – BerggreenDK Jan 24 '13 at 02:33
  • Yes, and that applies to CSS. You still need to cover non-CSS images by using JavaScript. I hope there's new standard getting this covered. – Cat Chen Jan 25 '13 at 06:07
  • no I mean, you can build a media query pr. resolution type to include the right images for the specified resolution. – BerggreenDK Jan 27 '13 at 02:37