Detailed explanation
The viewport meta tag tells a browser how to size the page’s viewport and set its initial scale, especially on mobile devices. The viewport is the area through which the user sees a web page, while the layout viewport provides the width used for CSS layout. A typical declaration, placed inside the HTML <head>, is <meta name="viewport" content="width=device-width, initial-scale=1.0">. This helps a mobile browser lay out the page at an appropriate width rather than treating it like a desktop page.
Historically, mobile browsers needed to display websites designed only for desktop screens. Without a viewport declaration, they may use a wide default layout viewport, often around 980 CSS pixels, and then shrink the rendered page to fit the phone. As a result, text and controls can look tiny. A media query such as @media (max-width: 600px) may not match because it tests the layout viewport’s width, not the phone’s physical screen width. Media queries still function; they simply evaluate against a width that may not match the developer’s mobile-layout assumptions.
The width=device-width setting requests a layout viewport matching the device’s width in CSS pixels. CSS pixels are logical units, not necessarily individual hardware pixels, so a high-density phone can have many more physical pixels than its CSS viewport width. The initial-scale=1.0 setting requests an initial zoom scale of 1. Together, these settings establish a sensible starting point for responsive layouts, allowing breakpoints, flexible grids, and fluid images to behave as intended on mobile.
The tag does not make a website responsive by itself. You still need CSS that adapts to available space, such as flexible widths, suitable breakpoints, and images that do not overflow their containers. In interviews, distinguish viewport configuration from responsive styling and explain why a missing tag can prevent a mobile breakpoint from matching. Also avoid adding user-scalable=no or restrictive maximum-scale values: where browsers honour them, they can prevent users from zooming and create accessibility problems.
Key points to remember
- Place <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside <head>.
- width=device-width requests a layout viewport matching the device width in CSS pixels.
- initial-scale=1.0 sets the requested initial zoom scale to 1.
- Without the tag, mobile browsers may shrink a desktop-width layout, causing mobile breakpoints not to match.
- The tag supports responsive CSS; it does not replace flexible layouts or media queries.
Common mistakes candidates make
- Saying media queries stop working without the tag rather than explaining that they evaluate a potentially wider layout viewport.
- Confusing CSS pixels with physical screen pixels or claiming the tag alone makes a page responsive.
- Disabling user zoom with user-scalable=no or restrictive maximum-scale settings.
Likely follow-up questions
Does initial-scale=1.0 prevent the user from zooming?
No, it specifies the initial scale when the page loads. It does not itself restrict subsequent user zoom.
Why can a phone with a 1080-pixel screen have a much smaller CSS viewport width?
Physical pixels and CSS pixels are different units. On a high-density display, one CSS pixel can correspond to multiple physical pixels, so responsive breakpoints use the smaller logical width.
What is the difference between the layout viewport and the visual viewport?
The layout viewport is the area used to calculate CSS layout. The visual viewport is the portion currently visible to the user; pinch-zooming typically makes it smaller without changing the layout viewport’s width.
Interview tip: Show the standard tag, explain the shrunk desktop-page problem, and connect viewport width to media-query evaluation.