- Part Two Chapter 02 – Configure Viewport
Part Two Chapter 02
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
This web page has no viewport configured. The words in the paragraphs (i.e. in the <p> tags) are all too small for reading.
Example: Viewport Configured
This web page has a viewport properly configured. Now the words in the paragraphs (i.e. in the <p> tags) are all readable.
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>
- Previous: Develop Mobile Websites in HTML5
- Next: Choose and Register Domain Names
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 Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book