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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 60 | ? | ? | 47 | ? |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 60 | 60 | ? | ? | ? | 47 | ? |