就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. Visual Viewport API

在此页

草案
此页面不完整。

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 对象从 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

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

接口

VisualViewport
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 event:VisualViewport:scroll events you can onitor to know when chances occur to the window's viewport.

范例

The code below is based on the sample 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() 。 pendingUpdate flag serves to prevent multiple invocations of the transfrom that can occur when onresize and onscroll fire at the same time. Using requestAnimationFrame() ensures that the transform ocurrs 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);

规范

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

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
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 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0
height Chrome 61 Edge 79 Firefox 63 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0
offsetLeft Chrome 61 Edge 79 Firefox 63 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0
offsetTop Chrome 61 Edge 79 Firefox 63 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0
onresize Chrome 62
62
部分支持 61
Edge 79 Firefox 66 IE 不支持 No Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
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 IE 不支持 No Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 46
46
部分支持 45
Safari iOS 13 Samsung Internet Android 8.0
8.0
部分支持 8.0
pageLeft Chrome 61 Edge 79 Firefox 63 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0
pageTop Chrome 61 Edge 79 Firefox 63 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0
resize event Chrome 62
62
部分支持 61
Edge 79 Firefox 66 IE 不支持 No Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 46
46
部分支持 45
Safari iOS 13 Samsung Internet Android 8.0
8.0
部分支持 8.0
scale Chrome 61 Edge 79 Firefox 63 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0
scroll event Chrome 62
62
部分支持 61
Edge 79 Firefox 66 IE 不支持 No Opera 49
49
部分支持 48
Safari 13 WebView Android 62
62
部分支持 61
Chrome Android 62
62
部分支持 61
Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 46
46
部分支持 45
Safari iOS 13 Samsung Internet Android 8.0
8.0
部分支持 8.0
width Chrome 61 Edge 79 Firefox 63 IE 不支持 No Opera 48 Safari 13 WebView Android 61 Chrome Android 61 Firefox Android 68
68
Disabled ). To change preferences in Firefox, visit
Opera Android 45 Safari iOS 13 Samsung Internet Android 8.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

  • 最后修改：
  1. Visual Viewport API
  2. 接口
    1. VisualViewport
  3. 特性
    1. Window.visualViewport
  4. 事件
    1. VisualViewport : resize
    2. VisualViewport : scroll

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1