VisualViewport

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

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

The VisualViewport interface of 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 visual viewport using Window.visualViewport.

Note: Only the top-level window has a visual viewport that's distinct from the layout viewport. Therefore, it's generally only the VisualViewport object of the top-level window that's useful. For an <iframe>, visual viewport metrics like VisualViewport.width always correspond to layout viewport metrics like document.documentElement.clientWidth.

Properties

VisualViewport also inherits properties from its parent, EventTarget.

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.

Events

Listen to these events using addEventListener() or by assigning an event listener to the relevant oneventname property of this interface.

resize
Fired when the visual viewport is resized.
Also available via the VisualViewport.onresize property.
scroll
Fired when the visual viewport is scrolled.
Also available via the VisualViewport.onscroll property.

Examples

Hiding an overlaid box on zoom

This example, taken from the Visual Viewport README, shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. This is a nice way to improve the user experience when zooming in on pages. A live sample  is also available.

var bottomBar = document.getElementById('bottombar');
var viewport = window.visualViewport;

function resizeHandler() {
   if (viewport.scale > 1.3)
     bottomBar.style.display = "none";
   else
     bottomBar.style.display = "block";
}
 
window.visualViewport.addEventListener('resize', resizeHandler);

Simulating position: device-fixed

This example, also 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);

Note: This technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
VisualViewport
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?
height
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?
offsetLeft
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?
offsetTop
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?
onresize
Experimental
Chrome Full support 62
Full support 62
Partial support 61
Edge No support NoFirefox Full support 66
Disabled
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49
Full support 49
Partial support 48
Safari Full support 13WebView Android Full support 62
Full support 62
Partial support 61
Chrome Android Full support 62
Full support 62
Partial support 61
Firefox Android Full support 68
Full support 68
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 46
Full support 46
Partial support 45
Safari iOS Full support 13Samsung Internet Android ?
onscroll
Experimental
Chrome Full support 62
Full support 62
Partial support 61
Edge No support NoFirefox Full support 66
Disabled
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49
Full support 49
Partial support 48
Safari Full support 13WebView Android Full support 62
Full support 62
Partial support 61
Chrome Android Full support 62
Full support 62
Partial support 61
Firefox Android Full support 68
Full support 68
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 46
Full support 46
Partial support 45
Safari iOS Full support 13Samsung Internet Android ?
pageLeft
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?
pageTop
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?
resize event
Experimental
Chrome Full support 62
Full support 62
Partial support 61
Edge No support NoFirefox Full support 66
Disabled
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49
Full support 49
Partial support 48
Safari Full support 13WebView Android Full support 62
Full support 62
Partial support 61
Chrome Android Full support 62
Full support 62
Partial support 61
Firefox Android Full support 68
Full support 68
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 46
Full support 46
Partial support 45
Safari iOS Full support 13Samsung Internet Android ?
scale
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?
scroll event
Experimental
Chrome Full support 62
Full support 62
Partial support 61
Edge No support NoFirefox Full support 66
Disabled
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49
Full support 49
Partial support 48
Safari Full support 13WebView Android Full support 62
Full support 62
Partial support 61
Chrome Android Full support 62
Full support 62
Partial support 61
Firefox Android Full support 68
Full support 68
Full support 66
Disabled
Disabled From version 66: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 46
Full support 46
Partial support 45
Safari iOS Full support 13Samsung Internet Android ?
width
Experimental
Chrome Full support 61Edge No support NoFirefox Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 48Safari Full support 13WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 68
Full support 68
Full support 63
Disabled
Disabled From version 63: this feature is behind the dom.visualviewport.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 45Safari iOS Full support 13Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

  • Web Viewports Explainer — useful explanation of web viewports concepts, including the difference between visual viewport and layout viewport.