CSS - Viewport (Reader's window)

1 - About

A viewport is the viewing area on the screen media (generally of the Browser Tab)

When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.

There is at most one viewport per canvas, but user agents may render to more than one canvas (i.e., provide different views of the same document).

The layout viewport is the area in CSS pixels that the browser uses to calculate the dimensions of elements with percentage width.

Window resizing doesn't affect viewport.

3 - Example

A typical mobile-optimized site viewport will contain this meta tag. This meta will make the layout viewport fit the device width exactly.

<meta name="viewport" content="width=device-width, initial-scale=1">


  • width is the size of the viewport defined by:
  • initial-scale controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

4 - Snippet

4.1 - Calculation

  • This is window calculation, not the viewport but it can help (ie if you have element positioned absolutely outside, the innerwidth will be greater than the viewport. <note tip>The outside Width takes the whole window browser width</note>


4.2 - Listener

You can listen to viewport changes.


function listenerViewPort(e){
    if (e.matches) {
        console.log('Smaller than 750px');
    } else {
        console.log('Bigger than 750px');

Just minimize and maximize your browser windows below 750px and you should two messages.

5 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap