Web Design with HTML and CSS

244

The need for mobile-optimized websites

Web Design with HTML and CSS Digital Classroom

The following fi gure shows the page in the Safari web browser included with the Apple

iPhone. You can see that the entire page displays in the vertical orientation. The browser

automatically scales the page to size, and it also uses the 960-pixel-wide container as

the border of the screen. When rotated, the browser fl ips to the landscape mode and

automatically scales again; in this mode, the largest text on the page is readable, but the main

body text remains too small to read unless the user zooms in.

The fi xed-width layout as shown in the iPhone 3GS 320 × 480 — vertical layout (top) and horizontal layout (bottom).