ptg16476052Mobile Devices Should Come First 44716
Affecting the Viewport
The first thing you should do to your web pages to help them look better on mobile
devices is to set viewport settings. The viewport is the rectangular shape that web brows-
ers display in. On mobile phones and tablets the viewport is typically the full screen of
the device. On a desktop the viewport is the width and height of the browser window.
It’s important to understand the viewport because mobile devices display web content
differently depending upon how the viewport is configured. But as a web designer you
can affect how you want mobile browsers to render your pages. As you can see in Figure
16.1, if you don’t configure the viewport, your page can look very different, even for a
very simple page.
Here is the HTML for the page without the viewport configured:
<!doctype html>