Viewport
The viewport is the user’s visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
The rise of mobile devices changed how we view and build for the web. HTML5 introduced a method to let web designers take control over the viewport, through the meta tag.
You should include the following <meta> viewport element in all your web pages:
<!DOCTYPE html>
<html>
<head>
<!-- Other meta elements -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>
A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
We will discuss this property more when Responsive Web Design is introduced. In the meantime, include this in your head elements so that your pages display more appropriately on mobile browsers.
html