Information Technology Reference
In-Depth Information
out, in which case all 320px would have fit, but the text would be really small. We're
going to give it more information so it displays it right the first time.
Luckily for us, Viewport tags can also contain information regarding the scaling of the
page—including the ability of the user to zoom in and out of the given page. The
following—slightly more complex—Viewport tag specifies all of these things:
<meta name="viewport" content="width=320, height=device-height, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
This code tells the browser two things. First, it provides scale values, which allow the
browser to know what you consider the largest and smallest scale, and where to set the
scale initially. In this example, we're telling the browser that we coded the page so that
it's designed to be seen at 100%, and it shouldn't be any larger or smaller. The second
item this code adds is the ability to turn off the user's zoom in and out options, as can
be seen in the following Figure 6-2. Now we don't have to worry about our design not
being seen the way we intended it to be displayed to the user. Personally, I am a fan of
always taking away the user's ability to scale the page when building a mobile site or
application. I know some people really like the ability to pinch and zoom their way
through scaling heaven but, in reality, mobile devices have a very limited amount of
screen real estate and I feel, as a designer or a developer, that it is your job to use that
limited screen space to your advantage instead of putting the extra burden of having
your user pinch and zoom to navigate around your finished product.
Figure 6-2.
Chapter 2's "Who's That Tweet?" game with the user-scalable turned off
