What Is a Viewport? The Browser Space Your Website Can Use

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Start with the visible page area

   0:18

   The browser displays part of a document within a viewport.

   On-screen labels: Document content; Visible area; Scrolled content.

2. 2

   Step 2: Window size can change it

   0:30

   A smaller browser window gives the page less layout space.

   On-screen labels: Full browser window; Resized window; Available width.

3. 3

   Step 3: Screen pixels need context

   0:42

   Pixel density and CSS pixels affect how sizes are represented.

   On-screen labels: Device pixels; CSS pixels; Display density.

4. 4

   Step 4: Mobile views need configuration

   0:54

   A viewport setting helps mobile browsers use a suitable page width.

   On-screen labels: Viewport metadata; Device-width layout; Mobile presentation.

5. 5

   Step 5: Zoom changes the experience

   1:06

   Magnification can alter which part of the document is visible.

   On-screen labels: Zoomed view; Visible content; Usable controls.

6. 6

   Step 6: Test more than one width

   1:18

   A page should remain useful across the visitor views it supports.

   On-screen labels: Narrow view; Wide view; Real customer task.

Common questions

Go further