VisualViewport

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The VisualViewport interface of the the Visual Viewport API represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a unique VisualViewport representing the properties associated with that window. You can get a window's viewport using Window.visualViewport.

Properties

VisualViewport.offsetleft Read only
Returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels.
VisualViewport.offsetTop Read only
Returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels.
VisualViewport.pageLeft Read only
Returns the x coordinate relative to the initial containing block origin of the top edge of the visual viewport in CSS pixels.
VisualViewport.pageTop Read only
Returns the y coordinate relative to the initial containing block origin of the top edge of the visual viewport in CSS pixels.
VisualViewport.width Read only
Returns the width of the visual viewport in CSS pixels.
VisualViewport.height Read only
Returns the height of the visual viewport in CSS pixels.
VisualViewport.scale Read only
Returns the pinch-zoom scaling factor applied to the visual viewport.

Event handlers

VisualViewport.onresize
An event handler attribute for the resize event.
VisualViewport.onscroll
An event handler attribute for the scroll event.

Example

This example, taken from the Visual Viewport README, shows how to use this API to simulate position: device-fixed, which fixes elements to the visual viewport. A live sample is also available.

var bottomBar = document.getElementById('bottombar');
var viewport = window.visualViewport;
function viewportHandler() {
  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 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

Specification Status Comment
Visual Viewport API
The definition of 'VisualViewport' in that specification.
Draft Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support61 No No No48 No
height61 No No No48 No
offsetLeft61 No No No48 No
offsetTop61 No No No48 No
onresize

62

61

No No No

49

48

No
onscroll

62

61

No No No

49

48

No
pageLeft61 No No No48 No
pageTop61 No No No48 No
scale61 No No No48 No
width61 No No No48 No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support6161 No No48 No ?
height6161 No No48 No ?
offsetLeft6161 No No48 No ?
offsetTop6161 No No48 No ?
onresize

62

61

62

61

No No

49

48

No ?
onscroll

62

61

62

61

No No

49

48

No ?
pageLeft6161 No No48 No ?
pageTop6161 No No48 No ?
scale6161 No No48 No ?
width6161 No No48 No ?

Document Tags and Contributors

Contributors to this page: connorshea, jpmedley, bokand, deltab.
Last updated by: connorshea,