Understanding the Viewport meta tag in Responsove Web Design

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%

widthThe width of the virtual viewport of the device.
device-widthThe physical width of the device’s screen.
heightThe height of the “virtual viewport” of the device.
device-heightThe physical height of the device’s screen.
initial-scaleThe initial zoom when visiting the page. 1.0 does not zoom.
minimum-scaleThe minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scaleThe maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalableAllows the device to zoom in and out. Values are yes or no.


Please share  your views on Viewport meta tag for responsive designs. Thanks

Leave a Reply