RWD viewport refers to the part of the website, which is visible in the browser window. Therefore, the viewport is usually not the same size as the actual page. Mobile phones and other devices with smaller screens display pages in a virtual window or viewport.
RWD Viewport-attributes
Viewport tags has the following attributes:
- width: Width of the virtual viewport of the device.
- height: Height of the virtual viewport of the device.
- initial-scale: Zoom level when the page is first visited.
- minimum-scale: Minimum zoom level to which a user can zoom the page.
- maximum-scale: Maximum zoom level to which a user can zoom the page.
- user-scalable: Flag which allows the device to zoom in or out.(value= yes/no).
RWD Viewport Basic
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
<head>
<title>RWD Viewport</title>
<meta charset="utf-8" name="viewport"
content= "width=device-width, initial-scale=1.0">
</head>