Access to the Absolute Screen Scale Value

Question

I'm looking for the absolute screen scale value.

For example, when you bind to the gestureend event, you can access to event.scale data which is an around of 1:

1. case: scale > 1 Zoom In
2. case: scale < 1 Zoom Out

This data instead of being absolute, is relative to the state before the event was triggered.

For example:

• the user zooms to a level (let's say) 2
• then the user zooms out to a level (let's say) 1.8. Finally, the result will be that the viewport is still zoomed, but the scale value will be < 1.

So, my question is, how can I access to the absolute zoom scale value? In other words, how can I compare the scale value over the initial scale value?

Answer 1

I figured it out in this way:

function getCurrentScale() {
  return document.documentElement.clientWidth / window.innerWidth;  
}

const INITIAL_SCALE = getCurrentScale();
let lastScale = INITIAL_SCALE;

document.addEventListener('gestureend', () => {
  let currentScale = getCurrentScale();

  console.log("scale", {
    initial: INITIAL_SCALE,
    last: lastScale,
    current: currentScale
  });

  lastScale = currentScale;
});