The viewport is what users see on their viewing device. People visit web pages on a variety of devices. Common devices include desktop 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.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. Later on, we will learn how to use CSS to create a responsive page layout. It is important to use both viewport and CSS.
<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
<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.