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