Information Technology Reference
In-Depth Information
than previous attempts is the amount of information one can place in it. For example, a
simple Viewport tag might look like this:
<meta name="viewport" content="width=320,height=device-height" />
This code tells the mobile browser that the content of this page should be 320 pixels
wide and as tall as the device's screen. (If you're designing for a Tablet, you would
probably adjust this to 800px wide.) To get a better idea of how this would display a
page, take a look at Figure 6-1. It shows the "Who's That Tweet?" game we made in
Chapter 2 using the preceding viewport setting.
Figure 6-1.
Here we have the "Who's That Tweet?" game with a viewport set
Notice how the layout of the page is bigger than the available viewing real estate of the
handset? This is because while we set the height to be the height of the device, we set
the width too wide—320px—and the browser doesn't know anything about the initial
scale, as evidenced by the zoom buttons on the bottom of the page. The browser, in
this case, zoomed in to show the upper left of the page, and provided the zoom buttons
so users can zoom in and out of the page to either view as much or as little of the page
as they choose (While there are times when it is nice to be able to zoom content on a
page, it would be even better if we could disable that feature on this page so we can
guarantee that our layout will appear the way we intended it to). In other words, the
browser made an educated guess on how it should display this page, and it failed
miserably by pulling it to the upper left. It could have also displayed everything zoomed
