The viewport is the visible area of a web page. The viewport can vary with the device and will be smaller on a mobile phone and tablet than on a computer screen.
You can control the viewport, through the <meta> element. Include the following <meta> viewport element in your website to give the browser instructions on how to control the page’s dimensions and scaling:
<meta name="viewport" content="width=device-width, initial-scale=1.0">The width=device-width part sets the width of the page to follow the screen-width of the device (that 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.
Example:
- Without the viewport meta tag:
2. With the viewport meta tag:
Enjoy coding!
Read also:
CSS Responsive Web Design – Introduction
How to create a responsive zig zag layout?
How to create a responsive two-column layout?