Screen Size and Viewport

One thing you'll note about the different screen sizes and viewports of the iPhone, iPhone4, and iPad is the DPI. While your iPhone4 with retina display has a higher resolution and DPI, your web site is still best viewed at 320×480. The iPad is optimized for the same working area as an older laptop or PC. I'll talk more about scaling for the retina display in Chapter 3.

While you might think you have the entire pixel size to work with, you really don't because the address, status, and button bars take up substantial room. In portrait orientation on an iPhone, the address and status bars take up 80 pixels at the top, and the button bar takes up 44 pixels at the bottom, so the working area is smaller than the actual screen, as summarized in Table 1-1.