Viewport meta tag importance

Viewport meta tag importance

What happens if we do not add this tag in our webpage? ๐Ÿค”

ยท

2 min read

I found the importance of this tag a week before, because before that I was just using the shortcuts to get the sample boiler plate for html structure.

note: this tag is included in the boiler plate by default

What is this tag?

This tag is included in the meta tags of our HTML page, inside the <head> tag. It has various attributes which we can add inside this tag.

  • It looks something like this
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

Why it is necessary?

  • Because when we don't use this tag, then the browser will show the whole website with fixed size that we have set in CSS or it take the defaults in every device, like it's shown in the video example.
  • With the help of this tag browser will know that what to do when the device size is small/wide/narrow etc.

Example:

  • meta tag included โœ” meta-with.PNG

  • without meta tag โŒ meta-without.PNG

In the below video I have commented out (when the meta tag is in green) the meta tag at seconds 00:10 to show you how it looks without that.

Check out this video if you want to see what happens?

By Vishwas Acharya
THANK YOU ๐Ÿ˜‰


I also have a podcast, If you wanna check it out.

Did you find this article valuable?

Support Vishwas Acharya by becoming a sponsor. Any amount is appreciated!

ย