What is viewport in javascript

How to get the dimensions of browser viewport in JavaScript

If you are a website developer who builds responsive websites or learning to do so, you most probably have come across the term «browser viewport«.

For instance, as a requirement to develop responsive web pages, you are required to add the line below in your web pages section.

The viewport tag was introduced in HTML5 to allow web designers to take control over the viewport.

But you may still wonder what the browser viewport is.

In this article, you will learn what browser viewport is and how to get its dimensions using JavaScript.

What is a browser viewport?

Browser viewport refers to the visible area available to a webpage or a document inside a browser window. It is equal to the whole browser window minus the browser’s interface (such as address bar, title bar, menu bar, etc.).

The image below shows the screenshot of a browser window of this website’s homepage, with the viewport highlighted with a red border.

While the contents of the section of an HTML code is either hidden from view or shown on the title bar (eg. the page title and favicon), all the content of the section is displayed in the browser viewport.

The viewport size varies with the device screen size. Small devices such as mobile phones have by far smaller viewport as compared to large devices such as desktop computers.

The size of the viewport does not entirely depend on the device screen size, but on the size of the browser window. The browser viewport size varies in proportion to the browser window. On resizing the browser window to a small size, so does the viewport minimize and vice versa.

How to get the browser viewport dimensions

The easiest way to do that is to visit the What is my viewport (https://whatismyviewport.com/) website.

It will show your browser viewport size in terms of width and height in pixels (px) as in the screenshot below:

While the screen size values above remain constant throughout, you will notice that on resizing the browser window the viewport size width and height keep changing.

Getting the viewport dimensions in JavaScript

While the method above shows you a simple and quick way to know what your browser viewport dimensions are, you may need something beyond it.

For instance when you want to perform varying actions on your web pages based on the current viewport dimensions. In such a scenario, you will have to use JavaScript code as it allows you to get the viewport dimensions from within the page.

There are two slightly different methods:

This method gets CSS viewport @media (width) and @media (height) which include scrollbars width/height. Use this method to get the full browser viewport width and height.

Zooming may cause values to be 1px off due to native rounding.

This method gets CSS viewport width minus scrollbar width. It matches that of method 1 when the web page has no scrollbar.

Getting viewport dimensions in jQuery

There are also two slightly different methods of getting viewport dimensions in jQuery:

This method returns the width and height of the browser viewport. This is the region we defined at the top.

This method is used to get the width and height of an HTML document. It varies from method 1 when the width or height of the web page exceeds those of the browser viewport.

An example to differentiate the two.

For instance, the width of the browser viewport may be 1300px and the width of the page 1370px. To view all the page content, one will be required to scroll to the right. Using method 1 to get the width will return 1300 while method 2 will return 1370. The same concept applies to height property.

That’s all for this article!

It’s my hope that you found this article helpful. Join our email newsletter or follow us on social media to be notified when we add more helpful articles.

You May Also Like:

Источник

Visual Viewport API

The Visual Viewport API provides an explicit mechanism for querying and modifying the properties of the window’s visual viewport. The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn’t scale with the dimensions of a page.

Visual Viewport concepts and usage

The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. User-interface features like the on-screen keyboard (OSK) can shrink the visual viewport without affecting the layout viewport.

What happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? For example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device? Current browsers vary in how they handle this. The visual viewport lets web developers solve this by positioning elements relative to what’s shown on screen.

To access a window’s visual viewport, you can obtain a VisualViewport object from the window.visualViewport property. The object includes a set of properties describing the viewport. It also adds two events, onresize and onscroll , that fire whenever the visual viewport changes. These events allow you to position elements relative to the visual viewport that would normally be anchored to the layout viewport.

Accessing the API

A read-only reference to the window’s VisualViewport object. If this property doesn’t exist, the API is unsupported.

Interfaces

Represents the visual viewport for a given window. A window’s VisualViewport object provides information about the viewport’s position and size, and receives the resize and scroll events you can monitor to know when changes occur to the window’s viewport.

Example

The code below is based on the sample in the specification, though it adds a few things that make it function better. It shows a function called viewportHandler() . When called it queries the offsetLeft and height properties for values it uses in a CSS translate() method. You invoke this function by passing it to both event calls.

One thing that may not be clear in this example is the use of the pendingUpdate flag and the call to requestAnimationFrame() . The pendingUpdate flag serves to prevent multiple invocations of the transform that can occur when onresize and onscroll fire at the same time. Using requestAnimationFrame() ensures that the transform occurs before the next render.

let pendingUpdate = false; function viewportHandler(event)  if (pendingUpdate) return; pendingUpdate = true; requestAnimationFrame(() =>  pendingUpdate = false; const layoutViewport = document.getElementById("layoutViewport"); // Since the bar is position: fixed we need to offset it by the // visual viewport's offset from the layout viewport origin. const viewport = event.target; const offsetLeft = viewport.offsetLeft; const offsetTop = viewport.height - layoutViewport.getBoundingClientRect().height + viewport.offsetTop; // You could also do this by setting style.left and style.top if you // use width: 100% instead. bottomBar.style.transform = `translate($offsetLeft>px, $offsetTop>px) scale($ 1 / viewport.scale >)`; >); > window.visualViewport.addEventListener("scroll", viewportHandler); window.visualViewport.addEventListener("resize", viewportHandler); 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

Источник

Visual Viewport API

The Visual Viewport API provides an explicit mechanism for querying and modifying the properties of the window’s visual viewport. The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn’t scale with the dimensions of a page.

Visual Viewport concepts and usage

The mobile web contains two viewports, the layout viewport and the visual viewport. The layout viewport covers all the elements on a page and the visual viewport is what is actually visible on the screen. When the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. User-interface features like the on-screen keyboard (OSK) can shrink the visual viewport without affecting the layout viewport.

What happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? For example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device? Current browsers vary in how they handle this. The visual viewport lets web developers solve this by positioning elements relative to what’s shown on screen.

To access a window’s visual viewport, you can obtain a VisualViewport object from the window.visualViewport property. The object includes a set of properties describing the viewport. It also adds two events, onresize and onscroll , that fire whenever the visual viewport changes. These events allow you to position elements relative to the visual viewport that would normally be anchored to the layout viewport.

Accessing the API

A read-only reference to the window’s VisualViewport object. If this property doesn’t exist, the API is unsupported.

Interfaces

Represents the visual viewport for a given window. A window’s VisualViewport object provides information about the viewport’s position and size, and receives the resize and scroll events you can monitor to know when changes occur to the window’s viewport.

Example

The code below is based on the sample in the specification, though it adds a few things that make it function better. It shows a function called viewportHandler() . When called it queries the offsetLeft and height properties for values it uses in a CSS translate() method. You invoke this function by passing it to both event calls.

One thing that may not be clear in this example is the use of the pendingUpdate flag and the call to requestAnimationFrame() . The pendingUpdate flag serves to prevent multiple invocations of the transform that can occur when onresize and onscroll fire at the same time. Using requestAnimationFrame() ensures that the transform occurs before the next render.

let pendingUpdate = false; function viewportHandler(event) < if (pendingUpdate) return; pendingUpdate = true; requestAnimationFrame(() => < pendingUpdate = false; var layoutViewport = document.getElementById('layoutViewport'); // Since the bar is position: fixed we need to offset it by the // visual viewport's offset from the layout viewport origin. var viewport = event.target; var offsetLeft = viewport.offsetLeft; var offsetTop = viewport.height - layoutViewport.getBoundingClientRect().height + viewport.offsetTop; // You could also do this by setting style.left and style.top if you // use width: 100% instead. bottomBar.style.transform = 'translate(' + offsetLeft + 'px,' + offsetTop + 'px) ' + 'scale(' + 1/viewport.scale + ')' >) > window.visualViewport.addEventListener('scroll', viewportHandler); window.visualViewport.addEventListener('resize', viewportHandler);

Specifications

Источник