HTML · The document layer
What does the viewport meta tag do?
Short answer
The viewport meta tag tells mobile browsers to use the device width and a normal zoom level. The standard value is width=device-width, initial-scale=1, and you should not block user zoom.
Without a viewport tag, mobile browsers often assume a wide desktop layout and shrink it to fit. The page appears zoomed out and text is tiny. The viewport tag tells the browser to treat the layout viewport as the device width instead.
<meta name="viewport" content="width=device-width, initial-scale=1" />What the values mean
- width=device-width makes the layout viewport match the device width
- initial-scale=1 sets the initial zoom to 100 percent
- maximum-scale=1 and user-scalable=no block pinch zoom and should be avoided
- Viewport settings affect layout, but responsive behaviour still needs flexible CSS
- Very wide fixed-width layouts will still overflow on small screens
Accessibility guidance discourages disabling zoom because low-vision users rely on it. If a design breaks when zoomed, fix the layout rather than blocking the user.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why should you not set user-scalable=no?
- 2What happens if the viewport meta tag is missing?
- 3Does the viewport tag make a site responsive?
- 4What is the difference between layout viewport and visual viewport?
Say it in the interview
The viewport meta tag tells mobile browsers how to size the layout viewport. I use width=device-width and initial-scale=1 so the page matches the device width at normal zoom. I avoid maximum-scale=1 or user-scalable=no because blocking zoom harms low-vision users. The tag is only a starting point; I still need responsive CSS, and it does not make a fixed-width layout responsive by itself.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.