The viewport meta declaration advises mobile browsers how to size the layout viewport.
Make this comfortable
HTML viewport metadata: let a mobile layout use device width
Use it in a concrete workflow
A field technician opens an inspection record on a phone. With width=device-width, a responsive stylesheet can size the record against the device viewport rather than a wide virtual canvas. This tag does not itself make a two-column desktop layout usable on a narrow screen. The content order, controls, tables, and CSS still need mobile review. Avoid disabling zoom: technicians may need to enlarge a dense serial number or inspection note.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inspection I-47</title>
</head>
<body><main><h1>Inspection I-47</h1><p>Seal check pending.</p></main></body>
</html>Behavior and ownership
The declaration belongs in head. It does not set actual text size, replace responsive CSS, or guarantee that large tables fit. Test zoom, landscape orientation, and keyboard focus on real narrow viewports.
Performance and maintenance
The metadata adds negligible transfer weight. The expensive mistakes are layout overflow and controls that require horizontal scrolling; those are design and implementation costs outside this tag.
Common Mistakes
- Do not set user-scalable=no to conceal a broken layout.
- Do not assume device width makes fixed-width content responsive.
- Do not omit the title while tuning mobile behavior.
Connected lessons
html
core