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.
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.
<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
✶ 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
<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 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