Viewoport Meta Tag

Hello, I have been working on a mobile first personal project over the past few days. I expected the thing to take no more than two days to complete, I am now almost 5 days in. I had been stuck on an issue that made my content shrink to an extremely small size whenever I viewed it on a mobile screen. To Keep this one short, after some hours of searching I found out that all my troubles were being caused because I never included the viewport meta tag in my header. I had always noticed, this tag in production code but I never really saw understood why. To be honest I still don’t fully understand it but at least now I see the importance of it. I will never leave it out of my source again.

If anyone is having trouble with some mobile first code. I would suggest you start by including this tag if you haven’t already. Here are a few links explaining the purpose and the importance of the vewport meta tag and how it became so necessary:

using the viewport meta tag to control layout

Viewport meta element

Meta viewport

Hope this proves useful to someone.

2 Likes