Poor HTML

The reason your meta tag is being ignored is that modern browsers (especially Safari on iOS 10+ and Chrome on Android) have intentionally disabled the ability for websites to block zooming.

Here is exactly why it’s failing:

  1. Accessibility Overrides: Apple and Google decided that zooming is a vital accessibility feature for users with low vision. To prevent developers from accidentally making sites unreadable, they programmed the browser to simply ignore user-scalable=no and maximum-scale=1.0.
  2. The “Native” Conflict: Browsers treat your app as a “website” first. Websites are expected to be flexible. Even though you want yours to feel like a “Native App” (which usually don’t zoom), the browser forces the zoom capability to remain active unless you use specific technical “tricks.”
  3. Double-Tap Logic: Browsers have a built-in “double-tap to zoom” feature. The meta tag has never been very good at stopping this. Even if you block pinching, a fast double-click will still trigger a zoom-in because the browser thinks you’re trying to read text.
  4. The Fix is now JS/CSS: Because the meta tag is now officially “deprecated” for blocking zoom, you are forced to use the JavaScript event listeners and the CSS touch-action property we added. Those methods don’t ask the browser for permission; they physically intercept the fingers’ movement before the browser can react.

Summary: The meta tag isn’t “broken”—the browsers are intentionally ignoring it to protect the user’s right to zoom. That is why we had to add the “Nuclear” JavaScript fix inside your init() function.