Contact for Expert ServicesAdvertise with Ecomspark.

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%

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.

 

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

Add a Comment

Your email address will not be published. Required fields are marked *

Translate »