I want to change scale of visualViewport. How can I achieve this pragmatically?

Question

I want to change scale of visualViewport. I want to control zoom pragmatically on certain condition. How can I achieve this?

Edit: The window.visualViewport.scale is totally different from the zoom of the CSS transforms which was previously referred as a solution to this problem and as a reason for locking this question. CSS transforms operate inside the layout viewport while visualViewport scale does not affect the layout per design.

Btw. I have an answer to this if this question were to be reopened. — loop, Sep 21 '21 at 21:10
Refusal to reopen just shows the incompetence of the user base of this site. — loop, Sep 23 '21 at 13:30
This question should really not mark as duplicate! It is a very good question. — nuynait, Oct 14 '21 at 18:40
@nuynait I will if you create a new question because "this question has been answered, is not unique, and doesn’t differentiate itself from another question." — loop, Oct 14 '21 at 19:08

billy.farroll · Answer 1 · 2018-05-31T13:43:47.013

This i believe from what I've researched and read will need an API. I have found some code on the subject and a link to where you can understand how this API works. I think if I understand your question, this will be a solution:

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

Check it out: https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

This is event handler which will get fire on scale change. I want to change the scale by code.\ — Joker_37, May 31 '18 at 13:35
I understand, check my revised answer. This may be a little more suited to your needs. — billy.farroll, May 31 '18 at 13:44

I want to change scale of visualViewport. How can I achieve this pragmatically?

1 Answers1