Intro to HTML: Viewport Meta Tag

The viewport is what users see on their viewing device. People visit web pages on a variety of devices. Common devices include desk top computers, laptops, tablets and cell phones. Some people even view the web on devices as small as a smart watch. Set the viewport to help make pages responsive.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.
Quick Copy Boxes

Every web page should have a viewport meta tag. It gives the user's web browser important information about the page view, letting it know how to scale the page to the used device. Later on, we will learn how to use CSS to create a responsive page layout. It is important to use both viewport and CSS.


Syntax



<meta name='viewport' content='width=device-width, initial-scale=1.0' > 
            

<meta starts meta tag
name='viewport' 'viewport' is set as the name of a viewport meta tag
content='width=device-width, initial-scale=1.0'
✶ width=device-width: sets the width of page view equal to the device's screen width.
✶ initial-scale=1.0: sets the zoom level on page load.
> ends tag


Example Head with Meta Tags



<head>
 <meta name='keywords' content='mars, space travel, nasa, spacex, space exploration'>
 <meta name = 'viewport' content = 'width=device-width, initial-scale=1.0'>
 <title>Journey to Mars</title>
</head>

<head> Head element starts
 <meta name='keywords' content='mars, space travel, nasa, spacex, space exploration'> The keywords of this page are set to 'mars, space travel, nasa, spacex, and space exploration'
 <meta name = 'viewport' content = 'width=device-width, initial-scale=1.0'>Responsive viewport is set
 <title>Journey to Mars</title> The title of the page is 'Journey to Mars'
</head> Head element ends

Play with the code in the code editor box below. If you have your own programming environment set up, play with the content in the viewport tag. Even try deleteing the tag. Take note of how the view changes.