Viewport: the visible area and arrangement of the mobile page

Useful to know

On a phone, a browser does more than shrink a desktop page. It determines the area in which content is laid out. The viewport describes this viewing context. On mobile devices, distinguishing the layout viewport from the visual viewport helps explain why zooming, opening the on-screen keyboard or changing the window can alter what the reader sees. The two concepts describe related but different aspects of presenting a document. [1]

The HTML meta element with name="viewport" supplies instructions for this presentation. A common setting, width=device-width, relates the layout width to the device in CSS pixels, while initial-scale controls the initial zoom. [2] A CSS pixel is a layout unit and should not automatically be equated with one physical display pixel. For mobile design, usable space and readability are more informative than the phone’s advertised screen resolution alone.

Consider a timetable containing a heading, a filter and a table of departure times. On a narrow screen, the question is not simply whether every column can be made smaller. The designer must decide what needs to be visible first and whether times remain easy to compare. The viewport setting provides part of the technical foundation, but it cannot choose which columns to combine or how to present a long stop name.

The distinction between layout and visual viewports becomes especially relevant when zooming. The visible area may show only part of the laid-out document. [1] Testing should therefore include enlarged text or zoom as well as the initial view. Does a departure time remain clearly associated with the right stop? Can a reader understand the next action? These checks concern practical use rather than merely fitting everything inside the screen.

Restricting zoom can create difficulties for people who rely on enlargement to read. MDN warns about disabling scaling through viewport settings. [2] When a table is difficult to use, examine its layout and content before limiting the visitor’s actions. Preventing zoom does not explain or solve a poorly arranged table. A useful investigation starts with the actual material, its dimensions and the information that must stay connected.

For a final review, try narrow and wide windows, rotate the device and open the on-screen keyboard while using the filter. Record what remains visible and whether the task can be completed without guesswork. The viewport is then understood as one part of the relationship between the browser, the space available for layout and the way people read and operate the page, rather than a magic instruction at the top of an HTML file.