Compare Different Devices

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

If you want to design web pages optimized for the iPhone, iPad, and desktop computer, you need to first understand the design differences of these different devices. The table gives a quick overview of the resolution, screen, and display differences between the iPhone, iPad, and iPod touch.

If you want to also design a version of a site for desktop computers, consider following the current guidelines on the web and then design for monitors with a resolution of 1024 x 768 pixels.

A Comparison of Design Differences in the iPhone, iPad, and iPod touch
Device Name	Display	Screen Resolution	Screen Size in Pixels	Icon Size in Pixels
iPhone 3GS	A 3 1/2-inch (diagonal) widescreen Multi-Touch display	163 pixels per inch (ppi)	Portrait: 320 x 480 Landscape: 480 x 320	57 x 57
iPhone 4.0	A high-resolution retina display and 3 1/2-inch (diagonal) widescreen Multi-Touch display	326 ppi	Portrait: 640 x 960 Landscape: 960 x 640	114 x 114
iPad	A 9.7-inch (diagonal) LED-backlit glossy widescreen Multi-Touch display with IPS technology (which is what gives the iPad a wide viewing-angle of up to 178 degrees)	132 ppi	Portrait: 768 x 1024 Landscape: 1024 x 768	72 x 72
iPod touch	A 3 1/2-inch (diagonal) widescreen Multi-Touch display	326 ppi	Portrait: 640 x 960 Landscape: 960 x 640	57 x 57