Compare Different Devices

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
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.