HTML and CSS Reference
In-Depth Information
figure 8-49
the visual and layout viewports
visual viewport
layout viewport
sabri deniz kizil/Shutterstock.com
okicoki/Shutterstock.com
Most of the time, users interact with Web pages on mobile devices without being
aware of the two viewports. When a user pans through a page, he or she is scrolling
through the contents of the visual viewport. Zooming out of the page to view more of the
page content has the effect of displaying more of the layout viewport within the visual
viewport, at the expense of decreasing the font size and making the text difficult to read.
If a user zooms completely out, displaying the entire page within the screen, the layout
viewport coincides with the visual viewport.
The size of the layout viewport is set by the browser running on the mobile device. For
example, the mobile version of Safari running on the iPhone has a layout viewport width
of 980 pixels, the Opera Mini browser uses an 850-pixel-wide layout viewport, and
Android's default Web browser employs a layout viewport that is 974 pixels wide. These
are the default values; layout viewports increase in width based on the layout of the Web
page being viewed. The apparent width of the visual viewport, on the other hand, does
not change, as it is based on the physical size of the device screen.
The distinction between the visual viewport and the layout viewport is important
because mobile browsers render Web pages based on the size of the layout viewport, not
the visual viewport. This is done so that Web sites designed for larger desktop displays
will translate quickly and easily to smaller mobile screens. For example, although the
iPhone screen is only 320 pixels wide, the mobile browser running on the iPhone acts as
if the device was 980 pixels or more in width. This is why Kevin's document is so difficult
to view on a mobile display. Thus, to optimize your Web site for mobile display, you first
should set the width of the layout viewport to match the width of the device's screen.
Once that is done, you can create a style sheet that matches the screen width of the
mobile device. You set the layout viewport using a
meta
element.
