Thursday, 23 December 2021

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

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.

enter image description here

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 ?



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

No comments:

Post a Comment