How to enable non-native pinch-to-zoom on mobile in viewer.html?

[3rd3]

I am trying to use the PDF viewer in an <iframe> like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<iframe src="pdfjs-3.5.141-dist/web/viewer.html?file=%2F<?= $filename ?>" frameborder="0" style="height: 100%; width:100%;"></iframe>

However, when zooming in on iOS, it uses the native zoom from Safari/WebKit/UIkit, meaning the toolbar may disappear and the text gets blurry.

Is there a way to use the recently introduced pinch-to-zoom functionality on mobile devices in viewer.html? The merge #15886 mentioned in #2582 appears to be related, but I could not figure out how to use or enable it. Thanks.

[Snuffleupagus]

Assuming that you're talking about the default viewer, i.e. https://github.com/mozilla/pdf.js#online-demo, then pinch-to-zoom should be enabled and working by default.[1]
Hence this is likely Safari being "helpful" and overriding our custom pinch-implementation, however please keep in mind that Firefox is the primary development target for this library.

---

[1] WFM, using a Windows 11 laptop with a touch-screen in both Mozilla Firefox and Google Chrome. Additionally it also works fine with Firefox for Android (on a phone).

[3rd3]

The problem is the iframe which appears to prevent the pinch gesture from being passed on to the embedded document. Loading viewer.html directly without iframe solves this issue.

I wanted to avoid modifying the default viewer (favicon and title) by embedding it, but it looks like I will have to do so after all.

[leonardobaggio]

@3rd3,

Have you considered disabling the zoom of the page that contains the iframe? something like:

<meta name="viewport" content="width=device-width, user-scalable=no" />