The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta>
element in all your web pages:
This 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.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
Example:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded by: | Admin |