11.1. The Mobile Viewport

As Figure 11.2 illustrates, mobile web browsers typically display webpages on screens smaller than those of their desktop counterparts. At the same resolution, mobile devices display a fraction of the webpage.

Figure 11.2. Mobile browsers have a smaller viewport than desktop browsers

Most mobile browsers, however, do not initially display webpages as illustrated in Figure 11.2. If they did, nearly everyone would immediately zoom out to see the entire width of the page, as shown in Figure 11.3, so most mobile browsers automatically zoom out for you when they initially display a page.

Figure 11.3. How most mobile browsers initially display webpages by default

It’s important to understand how mobile web browsers, including those that run on tablet computers like the iPad, initially scale webpages to fit the display.