Aspect Ratios of Hand-Held Devices

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

When designing websites that will be displayed on iPhones and iPads, keep in mind aspect ratio — the ratio of the width to the height of an image or video. Aspect ratio is particularly important when you’re working with video. A standard TV displays video in 4:3 aspect ratio (or 1:1.33) — the nearly square format that generations of boob tube addicts know and love.

Basically, for every 4 pixels across, 3 pixels are down, so the standard-definition TV screen resolution is 640 x 480. Recently, HDTV has caused a move to the 16:9 aspect ratio (or 1:1.85), also referred to as widescreen, and a common resolution is 1280 x 720.

The aspect ratio of the iPhone is 3:2 (or 1:1.5), which isn’t even standard. The iPad is 4:3, just like a traditional television signal. To display a widescreen or HD image, both the iPhone and the iPad use the letterboxing technique, which places thin, black bars above and below the image.

In the figure, you see the effect of letterboxing when a video is played on a screen that does not fit the aspect ratio. Black bars appear at the top and bottom of this training video by author Janine Warner because the video does not fit the aspect ratio of the screen.

On the iPhone, when viewing a standard 4:3 video, you can tap to expand the image to fill the space vertically — but all it does is snip off the edges on either side. If you’re working with still images that are dramatically cropped (such as in a panoramic landscape), users either will see a lot of blank space on the screen or have to scroll a lot.