WEBVTT

00:00:00.000 --> 00:00:06.000
Is a website viewport the same as the whole screen?

00:00:06.000 --> 00:00:13.000
The viewport is the visible area available for the document.

00:00:13.000 --> 00:00:18.000
Understand the browser viewing area.
6 viewport basics.

00:00:18.000 --> 00:00:30.000
Start with the visible page area
The browser displays part of a document within a viewport.
Document content · Visible area · Scrolled content

00:00:30.000 --> 00:00:42.000
Window size can change it
A smaller browser window gives the page less layout space.
Full browser window · Resized window · Available width

00:00:42.000 --> 00:00:54.000
Screen pixels need context
Pixel density and CSS pixels affect how sizes are represented.
Device pixels · CSS pixels · Display density

00:00:54.000 --> 00:01:06.000
Mobile views need configuration
A viewport setting helps mobile browsers use a suitable page width.
Viewport metadata · Device-width layout · Mobile presentation

00:01:06.000 --> 00:01:18.000
Zoom changes the experience
Magnification can alter which part of the document is visible.
Zoomed view · Visible content · Usable controls

00:01:18.000 --> 00:01:30.000
Test more than one width
A page should remain useful across the visitor views it supports.
Narrow view · Wide view · Real customer task

00:01:30.000 --> 00:01:39.000
Your checklist
Start with the visible page area · Window size can change it · Screen pixels need context · Mobile views need configuration · Zoom changes the experience · Test more than one width

00:01:39.000 --> 00:01:47.000
Test the space the visitor actually has.
jerseyweb.je