VisualViewport

这是 实验性技术
检查 浏览器兼容性表格 在生产中使用这之前。

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 .

注意 : 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 .

特性

VisualViewport also inherits properties from its parent, EventTarget .

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

Events

监听这些事件使用 addEventListener() or by assigning an event listener to the relevant on eventname 特性为此接口。

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

范例

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);
					

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

规范

规范 状态 Comment
Visual Viewport API
The definition of 'VisualViewport' in that specification.
草案 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
VisualViewport
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0
height
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0
offsetLeft
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0
offsetTop
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0
onresize
Chrome 62
62
部分支持 61
Edge 79 Firefox 66
Disabled
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 Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
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 46
46
部分支持 45
Safari iOS 13 Samsung Internet Android 8.0
8.0
部分支持 8.0
onscroll
Chrome 62
62
部分支持 61
Edge 79 Firefox 66
Disabled
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 Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
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 46
46
部分支持 45
Safari iOS 13 Samsung Internet Android 8.0
8.0
部分支持 8.0
pageLeft
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0
pageTop
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0
resize event
Chrome 62
62
部分支持 61
Edge 79 Firefox 66
Disabled
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 Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
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 46
46
部分支持 45
Safari iOS 13 Samsung Internet Android 8.0
8.0
部分支持 8.0
scale
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0
scroll event
Chrome 62
62
部分支持 61
Edge 79 Firefox 66
Disabled
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 Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
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 46
46
部分支持 45
Safari iOS 13 Samsung Internet Android 8.0
8.0
部分支持 8.0
width
Chrome 61 Edge 79 Firefox 63
Disabled
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 Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
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 45 Safari iOS 13 Samsung Internet Android 8.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅

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