What is a Viewport?

Oscar de la Hera Gomez
A flower that represents spatial computing with the text "Viewport" beneath it.

The region of a smartphone, tablet or computer where computer graphics can be rendered.

The use of the term Viewport varies depending on the medium where it is being used.

To understand this further, consider the examples below.

The Entire Screen

A screenshot of a desktop computer with a screensaver that covers the entire screen.

Although we normally do not refer to it this way, a viewport is the entire area of a screen where graphics can be rendered (i.e. the screensaver above).

The Screen Area after applying Safe Area Insets

A screenshot showing a before Safe Area Insets and an After Safe Area Insets

An example of a viewport on a phone with and without safe area insets.

When creating apps, the viewport often refers to the area that is left after applying the safe area insets.

Within a Web Browser

Web.dev's illustration of the viewport of a web browser.

The viewport of a web browser on a computer (source: Web.dev).

On a laptop, tablet or computer, the viewport of a web browser is the area where a webpage can be rendered.

Web.dev's illustration of the viewport of a mobile phone web browser.

The viewport of a mobile web browser on load (source: Web.dev).

Web.devs illustration of how a viewport changes on a mobile phone.

The viewport of a mobile web browser changes between the "small viewport" and the "large viewport" as you scroll (source: Web.dev).

As demonstrated by the illustration above, on a smartphone, the viewport of a web browser dynamically changes as you scroll through the webpage.

This should be considered when designing and creating websites, as if you do not craft the web page properly, the code could cause visuals to become jittery when the viewport dynamically changes.

Within Software

A screenshot of a software program highlighting a viewport within the software.

Within software programs like Maya, Cinema4D, AutoCAD or Blender, the term viewport often refers to an area within the screen.

This implies that there can be multiple viewports within a program.

Within Augmented Reality, Virtual Reality or Mixed Reality

An image showing two children playing with an augmented reality game. The viewport covers the entire screen.

Within A/R, V/R, M/R or Spatial Computing, the viewport often refers to the part of the scene that is visible to the user.

This visual is a product of the model view project matrix and is sometimes used when referring to the Point of View of the A/R, V/R or M/R camera.

Looking to learn more about Technology, Augmented Reality, Virtual Reality, Mixed Reality or Spatial Computing?

Search our blog to find educational content on technology, A/R, V/R, M/R and spatial computing.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details