我想改变visualViewport的比例。我怎样才能务实地实现这一目标？ [复制]答案

【问题标题】：I want to change scale of visualViewport. How can I achieve this pragmatically? [duplicate]我想改变visualViewport的比例。我怎样才能务实地实现这一目标？ [复制]
【发布时间】：2018-11-10 12:53:06
【问题描述】：

我想更改visualViewport 的比例。我想在某些条件下务实地控制缩放。我怎样才能做到这一点？

编辑：window.visualViewport.scale 与 CSS 转换的缩放完全不同，之前被称为解决此问题的方法和锁定此问题的原因。 CSS 转换在布局视口内运行，而 visualViewport 比例不会影响每个设计的布局。

【问题讨论】：

顺便说一句。如果要重新打开这个问题，我有一个答案。
拒绝重开，只能说明本站用户群的无能。
这个问题真的不应该标记为重复！这是一个很好的问题。
@loop 你能在这里提供一些提示吗？
@nuynait 如果您创建一个新问题，我会这样做，因为“这个问题已经得到回答，不是唯一的，并且与另一个问题没有区别。”

标签： html viewport

【解决方案1】：

根据我的研究和阅读，我相信这需要一个 API。我找到了一些关于该主题的代码和一个链接，您可以在其中了解此 API 的工作原理。我想如果我理解你的问题，这将是一个解决方案：

let pendingUpdate = false;

function viewportHandler() {
  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 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);

查看：https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

【讨论】：

这是一个事件处理程序，它会在规模变化时触发。我想通过代码更改比例。\
我明白了，检查我修改后的答案。这可能更适合您的需求。