Viewport is commonly described as the visible area of a web page, which changes based on the size of the device used to access the page. For example, desktop computers, tablets and smartphones all have a different viewports.
Viewport and Website Design
When designing websites, the viewport is an HTML meta tag (or @ rule in CSS) that is used to set styles and other website attributes to render the site on different devices. The viewport tag is used in conjunction with:
- Viewport Height & Width: Height (device-height value) or width (device-width values) to define the height or width of the viewport.
- Viewport Scale: Minimum-scale, maximum-scale, initial-scale, and user-scalable properties controls how the website is scaled on a mobile device.
- Viewport Resolution: Decides how to scale a website based off any viewport scale values
