CSS - Viewport (Reader's window)

About

The viewport 1) is the viewing area on a screen media.

It's then a property of media.

When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent (browser) 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 below the root element with percentage width.

Management

Definition

In a HTML page, you can define the viewport via the meta tag named viewport

A typical mobile-optimized site will contain this viewport definition. (ie the viewport will be set exactly to the the device width)

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

where:

  • 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.

Calculation

Thw viewport is the size of the window

Note because the code runs in a iframe, we use parent in the below code. You should delete it if you run in the top window

const viewPortWidth = parent.window.innerWidth;
const viewPortHeight = parent.window.innerHeight;

console.log(`viewport width is ${viewPortWidth}`);
console.log(`viewport height is ${viewPortHeight}`);

If you have element positioned absolutely outside, the innerwidth will be greater than the viewport. The outside Width takes the whole window browser width

Programmatic

Query

  • Create a media query object (known as a media query list)
let maxWidthMediaQuery = window.matchMedia('(max-width:750px)');
  • Create a function
function viewPortReporter(mediaQueryObject){
    if (mediaQueryObject.matches) {
        console.log('Smaller than 750px');
    } else {
        console.log('Bigger than 750px');
    }
}
  • Does the media match the query ?
viewPortReporter(maxWidthMediaQuery);

Listener

You can listen to viewport changes with a change event listener.

This listener is also known as a media listener.

maxWidthMediaQuery.addEventListener("change",viewPortReporter);
// deprecated, old
// maxWidthMediaQuery.addListener(viewPortReporter);

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





Discover More
Bootstrap - Navbar

in Bootstrap In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the...
Global Namespace Web Console Firefox
Browser - (Window | Tab) (Javascript Global scope)

window: is a javascript object that represents a tab in the whole browser that render a document. is the javascript global scope for the variable in the browser. is part of the web api holds the...
Browser
Browser - Rendering ( HTML Latency)

Rendering is a page load phase that consists of generating an output that can be read by the client. Render tree building stage: The CSSOM and DOM trees are combined into a render tree. Before the...
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
Boxdim
CSS - (Length) Unit

CSS The unit in CSS is the second element of a length that defines the type of the length number. Example: px, em, etc ... The recommended unit scales are: Screen: rem, em, px, % Print:...
CSS - Absolute Positioning (Relative / Absolute / Fixed > Absolute or Static > Absolute )

absolute positioning is a positioning model that occurs when a box has the absolute value as position property. When this is the case, the absolute box is positioned: from the first ascending box...
CSS - Bottom Property

The bottom property is the offset from the bottom edge of the . It applies only if the box itself has a position value of: relative absolute or fixed staticleftnormal flow positioning model ...
Boxdim
CSS - Boxes (Box Model)

CSS The Box model means that each element is represented as a rectangular box. The layout phase of the browser rendering engine creates the box model as a tree of box and determines: the , the...
CSS - Canvas

For all media, the term canvas describes “the space where the formatting structure is rendered.” The canvas is infinite for each dimension of the space, but rendering generally occurs within a finite...
CSS - Fixed Positioning (Anchored viewport positioning)

fixed positioning is a positioning scheme where the offsets (coordinates) are calculated relative to an anchored viewport. (ie the visible part of the window, an iframe, ..). anchored means that scrolling...



Share this page:
Follow us:
Task Runner