How the viewport meta tag works
Mobile browsers carry a legacy assumption. When the web was built for desktops, phones coped by pretending to be a wide monitor: they laid the page out at a desktop width and then shrank the whole thing to fit the screen. That is why an unprepared site appears on a phone as a perfect miniature of the desktop version, complete with text too small to read.
The viewport meta tag switches that behaviour off. It is a single line in the head of the document, named viewport, whose content sets the layout width to the width of the device and the initial scale to one. Together those tell the browser to lay the page out at the phone’s real width and to display it at natural size, so the stylesheet’s mobile rules apply and the text is legible without zooming.
The same content attribute can also restrict zooming, by setting a maximum scale or declaring the page not scalable by the user. That part is optional, and best left alone.
Why the viewport meta tag matters
Without it, none of your responsive work runs. The stylesheet can define beautiful mobile layouts and the browser will never reach them, because it thinks it is rendering to a desktop-width canvas. It is the switch that turns responsive design on.
It also affects how you are indexed. Google evaluates the mobile version of a page, and a page that renders as a zoomed-out desktop layout is a poor mobile experience by any measure. For a business whose visitors are overwhelmingly on phones, which is the norm in Nepal, a missing viewport tag is not a detail — it is the difference between a usable site and one people pinch, zoom and leave.
Common mistakes with the viewport meta tag
Blocking zoom is the mistake worth naming first. Designers sometimes lock the scale to stop the layout being pinched about, and the result is that anyone who needs to enlarge text cannot. It is an accessibility failure, it frustrates older visitors, and it fixes nothing a proper layout would not fix anyway.
Setting a fixed pixel width instead of the device width is the second: it recreates the original problem on any screen that is not exactly that wide. The third is assuming a theme includes the tag. Most do, but custom templates, landing pages built outside the theme and older builder pages often do not, and nobody checks because the designer works on a laptop.
How to act on it
Look at the page source of your key templates — home, service page, blog post, contact, and any standalone landing page — and confirm the tag is present and set to the device width. It takes a minute per template and it is the cheapest technical check on the site.
If you find a scale restriction, remove it and test the layout at small widths rather than defending the lock. Then open the site on a real phone, not just a resized desktop window, because the browser toolbar, the on-screen keyboard and a real thumb all reveal problems a simulator hides. If several templates are missing it, that usually points at a wider gap worth reviewing as part of technical SEO.