Layout / The visual dictionary

Viewport.

The visible region through which content is presented.

Also calledviewable areascreen viewport

See it in context

UI illustration

Visible viewport

What it is

The visible region through which content is presented. Size layouts against the available viewing area and account for changes caused by browser or system controls.

When to use it

Use viewport dimensions to reason about what is currently visible.

Know the difference

The viewport is the viewing window; the full document may extend well beyond it.

Across platforms

WebiOSiPadOSAndroidmacOSWindowsLinuxwatchOSWear OStvOSAndroid TVvisionOS

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Mobile browser chrome can change viewport height; desktop windows can resize without changing the monitor.

Go to the source

Primary documentation for the pattern and its platform conventions.

Apple Human Interface Guidelines — Layout

FROM NAME TO NEXT BUILD

Put it into words.

Choose a device and an effect, then copy the whole description.

Building forPhone modelAnimation effectBrowse the effect library

Create a viewport. Size layouts against the available viewing area and account for changes caused by browser or system controls. Use viewport dimensions to reason about what is currently visible. Make it responsive and accessible, and follow the selected platform's interaction conventions.

Your copied description includes the component, device context, and selected animation timing.

See it in context

What it is

When to use it

Know the difference

Across platforms

Web · iOS · iPadOS · Android · macOS · Windows · Linux · watchOS · Wear OS · tvOS · Android TV · visionOS

Go to the source

You might also mean…

Responsive layout

Container

Fixed positioning