Understanding the Viewport meta tag in Responsove Web Design

GK | January 14, 2015 | Technology | No Comments

This is Internet Era. Each one of us using internet in day to day life work. Every one buying products online. Everyone is using latest gadgets iPad , iPhone , smart phones, tablets, android, windows etc. All devices having different screen size and resolutions. It will be impractical to create different website versions for all devices resolutions.

As a web developer, while working on new website, you ever think about the responsive web design. Is the website you are working on need a responsive design?

I am not going in detail about responsive design. I am going to discuss view port meta tag in responsive web design.

Viewport meta tag tells the browsers how to behave when render a webpage on different screen devices.

Example of Viewport meta tag –

<metaname="viewport"content="width=device-width, initial-scale=1">

Note- Use Viewport meta tag only when you are designing responsive website, put it in your <head> section.
This defines that the width of the Viewport will be the same as the device you are viewing the website on. The scale of the website will be set to 100% and the maximum scale is set to 100%

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.