What is the viewport meta tag and what does width=device-width, initial-scale=1.0 do?

WHAT THIS TESTS: This question tests whether you understand how mobile browsers construct the layout viewport and the difference between CSS pixels and physical hardware pixels. Interviewers want to see that you know why a desktop-optimized site shrinks to fit on a phone without this tag, and how the viewport meta tag gives the browser explicit sizing instructions.

A GOOD ANSWER COVERS: A strong answer hits four things in order. First, state that the meta viewport tag tells mobile browsers how to size the viewport and scale the page. Second, explain that width=device-width sets the viewport width equal to the device screen width measured in CSS pixels, not physical pixels, which establishes the value of the vw unit. Third, explain that initial-scale=1.0 defines a one-to-one ratio between the device width and the viewport size, meaning the page loads at 100 percent zoom with no initial scaling. Fourth, mention that these two values together prevent the browser from assuming a default desktop-width viewport and zooming the page out to fit.

COMMON WRONG ANSWERS: The biggest red flag is confusing device-width with physical screen pixels. Another common mistake is saying the tag is only for responsive design without explaining the scaling relationship. Some candidates also omit initial-scale entirely or claim it controls user zoom permissions, which is actually handled by user-scalable, maximum-scale, and minimum-scale. Finally, avoid stating that the tag is optional on modern sites; without it, mobile browsers default to a desktop-width viewport and scale down.

LIKELY FOLLOW-UPS: An interviewer might ask what happens if you omit the viewport meta tag on a mobile device. They might also ask about the accessibility implications of setting user-scalable to no, or how interactive widgets like virtual keyboards affect the viewport via the interactive-widget property. Another common follow-up is asking for the difference between the visual viewport and the layout viewport.

ONE CONCRETE EXAMPLE: Consider a smartphone with a 390 CSS pixel wide screen in portrait mode. Without the viewport meta tag, the browser might assume a 980 pixel wide layout viewport and scale the entire page down so it fits on screen, making text unreadable. Adding width=device-width tells the browser to set the layout viewport to 390 CSS pixels wide, so your CSS media queries and percentage widths map directly to the screen. Adding initial-scale=1.0 ensures the page renders at a one-to-one zoom ratio immediately on load, so a 16px font appears at the intended physical size relative to the device.

Source: developer.mozilla.org