不常用的浏览器 API —— Visual Viewport

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

这一节继续看不常用的浏览器 API，本文要介绍的是 Visual Viewport，它表示的是可视窗口的能力，这一部分内容使用的也不多，涉及到一些窗口相关的基础知识，我们可以借着机会学习一下。

在移动页面中有两种窗口一个是真实页面布局的 layout 窗口，另一个就是我们要学习的 visual 窗口。layout 窗口指的是页面上的所有元素，而 visual 指的是屏幕上可以看到的内容，这里有一个非常重要的点：当用户缩放屏幕是 Visual Viewport 会发生变化，而 Layout Viewport 是不受影响的。

在 window 上有一个 visualViewport 对象封装了这部分 API 内容，我们可以通过 visualViewport 来访问到页面的可视窗口信息，相对而言在移动端使用的可能会多一些。

关于 viewportHandler 的使用场景我其实没有遇到，这里我直接引用 MDN 上面的例子来看：

let pendingUpdate = false;
function viewportHandler(event) {
  if (pendingUpdate) return;
  pendingUpdate = true;
  requestAnimationFrame(() => {
    pendingUpdate = false;
    var layoutViewport = document.getElementById('layoutViewport');
    var viewport = event.target;
    var offsetLeft = viewport.offsetLeft;
    var offsetTop = viewport.height
                - layoutViewport.getBoundingClientRect().height
                + viewport.offsetTop;
    bottomBar.style.transform = 'translate(' +
                                offsetLeft + 'px,' +
                                offsetTop + 'px) ' +
                                'scale(' + 1/viewport.scale + ')'
    })
}
window.visualViewport.addEventListener('scroll', viewportHandler);
window.visualViewport.addEventListener('resize', viewportHandler);

上面的是一个监听的例子，这里会在发生滚动和切换页面大小时处理，这里在 event 回调中也可以获取到 viewport 数据。

关于 viewport 还有一个更常见的地方，通常我们在写 HTML 时都会有这一行：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

更多时候这部分内容是自动生成的，这部分内容实际上做的事情和 API 也是一样的，我们设置 width=device-width, initial-scale=1.0 这个值也是为了使网页在移动页面上正常呈现，这里设置的效果是使得 Layout Viewport 和 Visual Viewport 展示的大小一致。