How to set responsive viewport meta tag

At the very beginning when I started responsive web deisgn I have face the problem regarding viewport meta tag. Actually I was working in the desktop browser where everything was seem to be working fine but as soon as I check the same site in mobile devices it was not working and just look crap. For the moment I thought there is a error in my code but it was working fine on desktop when re-sizing it. After that I thought to find a solution on Google because its a question regarding technology and I can’t play with my limited information to fix it. I found a lot of answers to fixed. So this post is going to show you how to set responsive viewport meta tag in your website.

Viewport meta tag

Generally viewport meta tag is used for responsive web design. It sets the viewport width and the initial scale on the mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0"&ft;

Disable zoom with viewport meta tag for responsive web design

If you want to disable the zoom feature on your website you can add another property call maximum-scale=1

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"&ft;

Leave a Reply

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