I am working on a PWA, in which I want to disable pinch zoom on the whole UI and only allow it on certain elements within the page.
Relevant CSS:
* {
touch-action: pan-y;
}
Not sure if relevant HTML:
<meta name="viewport" content="width=device-width,initial-scale=1" />
The problem is that I can still zoom the whole page on my phone.
How can I fix this?
To prevent pinch zoom across your entire PWA, use user-scalable=no in your viewport meta tag and apply touch-action: pan-y; globally in your CSS. If you need to allow pinch zoom on specific elements, override this by applying touch-action: auto; to those elements. This way, you disable zooming on most of the UI while still enabling it where necessary.
* {
touch-action: pan-y;
}
.allow-zoom {
touch-action: auto;
}<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<div class="content">
Pinch zoom disabled here
</div>
<div class="allow-zoom">
Pinch zoom enabled here
</div>1