The approach to developing software for both standard and retina display iOS devices depends very much on the application you are developing. It may be sufficient to develop for standard resolution and then scale the application to the retina display resolution. Other applications may rely on the retina display to provide the best user experience and may have to be scaled down to work on a standard resolution iOS device.

This lesson looks at some ways to provide functionality that displays information on both, standard and retina display iOS devices. In particular, we look at scaling fonts, button controls and graphic objects. We use a standard resolution image to highlight the quality difference between both display resolutions. In particular, diagonal and curved lines visibly take on a stronger step characteristic in the image, as it is scaled up.

Note: This stack is best tested on an iPhone 4 or later.

We create a LiveCode application that allows us to probe the screen resolution, scale to logical or pixel resolution and scale controls, depending on the screen resolution.

Button Get Resolution returns the resolution of the device in a popup dialog. If this resolution is 320,480, then your device is a standard resolution iPhone and this test stack does not provide any visible functionality. If the resolution is 640,960, then the remaining buttons allow you to perform resizing operations.

The easiest approach to developing software for both, standard and retina iOS devices is to scale a standard resolution application to a retina resolution using the iphoneUseDeviceResolution command. Although the easiest, the information displayed on the retina display mirrors the information that is displayed on the standard resolution. Step formation occurs on all aspects of the data displayed on the stack. This inclues the buttons, the text, the graphic and the image.

The benefits of this approach are a low development effort to make your application work on both device resolutions and the reduction in resource bloat that occurs when including multiple scale image, that may be needed for standard and retina displays.

Select the button Use Pixel Resolution to test the results of this approach.

Scaling the controls to the appropriate resolution provides an approach that allows data to be displayed at an optimal resolutions for both the standards and retina resolution. Use the Scale Controls button to test the performance of this approach. You notice that the buttons and the text are less pixalated. The graphic also has smoother lines compared to the green test image that is scaled. In order to display the green image in an optimal retina resolution, you would have to provide an image that has the double resolution, compared to the green image that is currently displayed.

There are many ways by which to implement applications that run on standard and retina display iOS devices. The approaches shown here provide basic concepts to consider when you develop your application. There are benefits and tradeoffs in most approaches and the type of application you are developing dictates the approach that is most suitable for you.

Note: Apple support a particular naming convention that distinguishes between standard and retina resolution images. An image displayed at standard resolution may be called "image.png". The equivalent retina display image would be called "[email protected]".