How to reset zoom (after pinch zoom) on a webpage from Javascript?

Question

I am working on an old cordova based app. On my page I have an iframe where I display PDFs (using PDFJS library). User can zoom on the PDF area, either using the zoom buttons on the PDF viewer or pinch zoom. The requirement is when user clicks on a button on the main page (non iframe area) I have to reset the zoom level of the PDF to normal.

I am able to do this if the zoom is done via zoom buttons using below code (PDFJS specific)

document.getElementById("myPdf").contentWindow.PDFViewerApplication.pdfViewer.currentScaleValue = 'auto';

But if the zoom is done using pinch zoom I am unable to reset (when pinch zoom is done, the complete HTML which is loaded in iframe is getting zoomed, so its a web page zoom). I tried below code, to reset the initial scale but its not working

document.querySelector("meta[name=viewport]").setAttribute(
          'content', 
          'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

Could anyone suggest a way to do this ?

Answer 1

You can try manipulating the .style.zoom property on the desired target element:

const zoomingTarget = document.querySelector('.zooming-target')

After you grabbed the desired element, which zoom you want to reset, you can change the .style.zoom property on it:

zoomingTarget.style.zoom = "calc(100% + " + zoomIndex*10 + "%)";

Implementation with two buttons-> Changing the browser zoom level