What is a Viewport?
The region of a smartphone, tablet or computer where computer graphics can be rendered.
The region of a smartphone, tablet or computer where computer graphics can be rendered.
SubscribeThe 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
"The safe area of a view reflects the area not covered by navigation bars, tab bars, toolbars, and other ancestors that obscure a view controller's view. (In tvOS, the safe area reflects the area not covered by the screen's bezel.) You obtain the safe area for a view by applying the insets in this property to the view's bounds rectangle. If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the edge insets in this property are
0.For the view controller's root view, the insets account for the status bar, other visible bars, and any additional insets that you specified using the
additionalSafeAreaInsetsproperty of your view controller. For other views in the view hierarchy, the insets reflect only the portion of the view that is covered. For example, if a view is entirely within the safe area of its superview, the edge insets in this property are0.You might use this property at runtime to adjust the position of your view's content programmatically."
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.