Viewport meta tag is the primary idea of Responsive Web Design. The viewport differs from device to device. It will be smaller on a mobile when contrasted with PC screen.
To set the viewport, HTML5 presented a technique <meta> tag, to permit developers to take control over the viewport.
It is compulsory to include <meta> viewport element in all your web pages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element control the page's measurements and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (this 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.
CSS viewport rule :-
1. Try not to utilize fixed width elements.
2. Substance ought not depend on a specific viewport width to render well.
3. Utilize CSS media queries to apply diverse styling for small and large screens
Following is the list of viewport properties :-
|
Property
|
Description
|
|
width
|
The width of the virtual viewport of the device.
|
|
device-width
|
The physical width of the device's screen.
|
|
height
|
The height of the "virtual viewport" of the device.
|
|
device-height
|
The physical height of the device's screen.
|
|
initial-scale
|
The initial zoom when visiting the page. 1.0 does not zoom.
|
|
minimum-scale
|
The minimum amount the visitor can zoom on the page. 1.0 does not zoom.
|
|
maximum-scale
|
The maximum amount the visitor can zoom on the page. 1.0 does not zoom.
|
|
user-scalable
|
Allows the device to zoom in and out. Values are yes or no.
|
0 Comment(s)