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

Posted 2023-02-21

【中文标题】我想改变visualViewport的比例。我怎样才能务实地实现这一目标？ [复制]

【英文标题】：I want to change scale of visualViewport. How can I achieve this pragmatically? [duplicate]

【发布时间】：2018-11-10 12:53:06

【问题描述】：

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

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

【问题讨论】：

顺便说一句。如果要重新打开这个问题，我有一个答案。

拒绝重开，只能说明本站用户群的无能。

这个问题真的不应该标记为重复！这是一个很好的问题。

@loop 你能在这里提供一些提示吗？

@nuynait 如果您创建一个新问题，我会这样做，因为“这个问题已经得到回答，不是唯一的，并且与另一个问题没有区别。”

【参考方案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

【讨论】：

这是一个事件处理程序，它会在规模变化时触发。我想通过代码更改比例。\

我明白了，检查我修改后的答案。这可能更适合您的需求。