What Is The Viewport?

Date First Published: 26th February 2023

Topic: Web Design & Development

Subtopic: Web Technologies

Article Type: Computer Terms & Definitions

Difficulty Level: 5/10

Learn more about what the viewport is in this article.

The viewport is the visible area of a webpage on a smartphone, tablet, laptop, desktop computer, or other devices. The size is determined by the size of the user's device and the application used to access the webpage. For example, on smartphones, the viewport is the whole screen size of the screen and on desktop computers, the size is equal to the window size of the browser.

Types Of Viewports

There are two types of viewports, which include:

• Layout viewport. This is the viewport that the browser draws a webpage into. It represents what is available to see.
• Visual viewport. This is the smaller viewport that represents what is visible on the user's device. This considers the fact that browser features, such as on-screen keyboards restrict the visibility of a webpage, but do not shift the page layout.

Viewport Meta Element

A more specific definition is the viewport meta element that was introduced in HTML5, which is used to automatically adjust the webpage to the screen size of the device, making sites optimised for smaller devices, such as smartphones. The viewport has now become an important thing to consider in responsive design as devices have all sorts of different screen sizes. Ideally, this meta element should be included on all webpages. An example of the meta element can be seen below:

The properties of the viewport meta element include:

• width=device-width - Sets the width of the page to adapt to the screen width of the device.
• initial-scale=1.0 - Sets the initial zoom level when the page is first loaded by the browser.

When using this meta element, webpages on mobile devices are not displayed in the same way as they would appear on a desktop screen. Without this meta element, users on mobile devices would have to zoom in or scroll horizontally to see the page since the page is too large for the viewport, creating a bad user experience.

CSS Responsive Viewports

CSS can be used to adjust the style of different elements according to the viewport size. This can be accomplished using media queries and is essential for creating elements that adapt to the user's screen size and do not malfunction on smaller devices. The @media CSS rule is used to do this and any styling under this rule will only apply to screens that fit certain dimensions. An example of the @media CSS rule can be seen below. It will hide a specified element when the screen size is below 500px.

Comments