What is a Viewport?
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
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
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
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.
The viewport of a mobile web browser on load (source: Web.dev).
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
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
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.