Pinch-to-zoom not working on Android Chrome; scrolling occurs instead

[quillcraftsman]

What happened?

Hello,

I have encountered an issue where "pinch-to-zoom" functionality does not work on my website built with Vue and Quasar when accessed on Android devices using the Chrome browser. Instead of zooming in or out, the page scrolls. I have the same problem on quasar.dev

What did you expect to happen?

The page should zoom in or out as expected.

How to reproduce?

Open the website quasar.dev on an Android device using the Chrome browser.
Attempt to zoom in or out using the "pinch-to-zoom" gesture.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Style & Identity (quasar)

Platforms/Browsers

Android

Quasar info output

No response

Relevant log output

No response

Additional context

Quasar version: 2.16.4
Chrome browser version:131.0.6778.39
Android version: 14

[github-actions]

Hi @quillcraftsman! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[quillcraftsman]

I've deleted the reproduction URL because it's not about code but about interacting with the devices.

[FangHanZreo]

This issue might be related to the meta configuration in the index.template.html file.

<meta
      name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
    />

[rstoenescu]

Changing that may have undesirable effects on the QLayout, but tweaking that meta tag in the index html file will do the trick. However, beware of the effects.

[quillcraftsman]

Got it, thanks. I will try it soon as possible and come back with feedback.

[quillcraftsman]

This issue might be related to the meta configuration in the index.template.html file.

<meta
      name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
    />

It works fine. Thanks a lot for your help.

[Vv-vfx]

Changing that may have undesirable effects on the QLayout, but tweaking that meta tag in the index html file will do the trick. However, beware of the effects.

This helps, but the problem is that now when focusing on the input field, autozoom works. And after the input is finished, reverse zoom does not work. Device - iPhone