javascript - 如何从Javascript重置网页上的缩放(捏缩放后)？

Question

我正在开发一个基于 Cordova 的旧应用程序。在我的页面上，我有一个 iframe，用于显示 PDF(使用 PDFJS 库)。用户可以使用 PDF 查看器上的缩放按钮或捏缩放缩放 PDF 区域。要求是当用户单击主页(非 iframe 区域)上的按钮时，我必须将 PDF 的缩放级别重置为正常。

如果使用以下代码(特定于 PDFJS)通过缩放按钮完成缩放，我可以做到这一点 document.getElementById("myPdf").contentWindow.PDFViewerApplication.pdfViewer.currentScaleValue = 'auto';但是，如果缩放是使用捏缩放完成的，我将无法重置(当捏缩放完成时，加载到 iframe 中的完整 HTML 会被缩放，因此它是网页缩放)。我尝试了下面的代码，以重置初始比例但它不起作用

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

谁能建议一种方法来做到这一点？

Answer 1

您可以尝试操纵 .style.zoom所需目标元素上的属性:

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

在您捕获想要重置的缩放元素后，您可以更改 .style.zoom属性:

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

用两个按钮实现-> Changing the browser zoom level