Configure Viewport


Part Two Chapter 02

Viewport

Web pages optimized for mobile devices must have a viewport configured in the head section.

Viewport

Think of viewport as a window that displays a web page. Nowadays users visit your web pages on devices with screens of different sizes. To have your web pages properly displayed to users, a properly configured viewport specifies the size of the window that will display.

Let's specify the parameters and values of a viewport:

width=device-width, initial-scale=1

The entire viewport META tag together must be:

<head>
  <meta name=viewport content="width=device-width, initial-scale=1">
</head>
  • “width” is the width of the virtual viewport on the device.
  • “device-width” is the physical width of the device's screen.
  • “initial-scale” is the initial zoom when the web page is visited. “1” or “1.0” means “does not zoom”.

No Viewport vs. Viewport

Let's demonstrate the importance of a properly configured viewport for mobile devices/screens.

Example: No Viewport

For example, the web page's URL is:

http://www.gordonchoi.com/viewport-samples/no-viewport-example.html

This web page has no viewport configured. The words in the paragraphs (i.e. in the <p> tags) are all too small for reading.

no-viewport-01.jpg

Example: Viewport Configured

For example, the web page's URL is:

http://www.gordonchoi.com/viewport-samples/viewport-example.html

This web page has a viewport properly configured. Now the words in the paragraphs (i.e. in the <p> tags) are all readable.

viewport-configured-01.jpg

Add Viewport to the HTML5 Page

Let's add the viewport to the HTML5 code of the web page.

<!doctype html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://www.example.com/css/stylesheet.css">
  <script src=" http://www.example.com/js/scripts.js"></script>
</head>
<body>
  <h1></h1>
  <p></p>
</body>
</html>


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Books:
The China Mobile SEO Book
Analytics Book