The Viewport Meta Tag: Your First Responsive Step
The viewport meta tag tells mobile browsers not to fake a desktop screen. It sets the page width to the device's width, enabling responsive design. It's essential for any modern site. The footgun: disabling user zoom (user-scalable=no) harms accessibility.
Why it exists
In the early days of smartphones, browsers would render pages at a default desktop width (like 980px) and then shrink the result to fit the small screen. This made sites "work" but left text unreadably tiny. The viewport meta tag was created to override this behavior and give developers control over the viewport's size and scale.
The mental model
Think of the viewport meta tag as the instruction manual for a mobile browser. Without it, the browser assumes it has a huge desktop canvas and shrinks your page to fit its tiny phone frame. With the tag, you tell it: "Treat your screen as the canvas. My design is built for it." It's the handshake that enables responsive design.
How it works
You add a <meta> tag to your HTML's <head>. The key part is the content attribute, which is a comma-separated list of directives. The most common setting, width=device-width, initial-scale=1.0, tells the browser two things. First, width=device-width sets the viewport width to the physical screen width of the device in CSS pixels. Second, initial-scale=1.0 establishes a 1:1 relationship between CSS pixels and device-independent pixels, preventing any initial zoom.
When to use it
Use this tag on every single web page you build that is intended to be responsive. It should be one of the first things you add to the <head> section of your HTML document. It's the foundation upon which all other responsive techniques, like media queries and flexible grids, are built.
When not to use it
You would only omit this for a legacy, non-responsive site that is intentionally designed to be viewed on a desktop and you accept the "zoomed-out" view on mobile. For any modern web development, its absence is almost always an error. A major misuse is disabling zoom with user-scalable=no. This is a critical accessibility failure, as it prevents users with low vision from magnifying content. Modern browsers, especially on iOS, may even ignore this directive to protect users.
One canonical example
The most robust, universally recommended starting point for any responsive page is: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This single line sets the page width to the device's width and ensures it loads without any initial zoom, providing a predictable base for your CSS and media queries.
Interview question
What primary problem did the viewport meta tag solve for early mobile browsers?
- a.It automatically converted pixel-based CSS units to relative units for better adaptability.
- b.It allowed developers to disable user zooming for a fixed, consistent layout.
- c.It prevented mobile browsers from automatically scaling down desktop-sized pages, making text unreadable.Correct
- d.It enabled the browser to cache responsive images more efficiently for faster loading.
Why? this is the answer
The card explains that early mobile browsers would render pages at a default desktop width and then shrink them, leading to unreadably tiny text. The viewport meta tag was created to override this behavior by setting the page width to the device's width. Disabling user zoom (option B) is explicitly mentioned as a critical accessibility failure and misuse, not the primary problem the tag solves.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #html
- #css
- #responsive design
- #accessibility
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on html — each one lists the topics its interview covers.
See open roles