View Port Meta tag importance in Responsive Web Design
Technology is keep on changing. That too in web designing industry we have to keep learn then only we can survive. In my experience i am seeing many changes in web design trends. We have to adopt the changes and trends to compete our rivals.
Okay coming to Responsive Web Design. We all know that it is mobile friendly, device friendly, it will converts it's design according to device (such as smart phone, tablet or computer).
Recently i have designed a big project website and the client asked me that it should be responsive website. Okay, i have designed everything, it's working fine in local. Once i have uploaded to host it was not worked. Then i looked for a solution. That time only i have came across this "view port" meta tag. then i have written like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
It's working fine.
The important properties in view port meta tag are width, height, and initial-scale.
Here we should be not give any extra commos, full stops then it will not work. We should be clear with coding style.
In content part, you can give custom widths like width is equal to device-width, or it you want to fix the width to mobile devices then you can give 500, 320 like that. Coming to height, you can fix it to device height. But normally we will not fix this width in responsive web design.
Initial Scale means it will fix precisely to device width.
User Scalable is very important property, it is a property to allow/block the user to change the zooming levels of the website screen. Normally we will not allow the user to zoom the website in mobile view. Because our design is only adjusting according to the device width, then no need to allow zooming option. This user scallable is a very important thing in view port meta tag.
While you are designing a responsive website you can clearly understand about this view port meta tag.
Share your valuable views and queries.