[mvkel]

It's not a viewport meta tag. It's { touch-action: manipulation; }.

And it doesn't work consistently. Very easy to break it if you double tap on the background and not somewhere in the text, for example.

Thanks for your... encouragement?

[anon373839]

Try:

  * { touch-action: manipulation; }

While you're at it:

  * { 
      user-select: none; 
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none; 
  }

Then, you can override these if needed for specific elements.

Since the "frame" of a native app isn't wiggly and pinchable, I also suggest something like:

  html {   
    height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
  }

  body { 
    height: 100svh;
    width: 100vw;
    overflow: hidden;
    touch-action: none;
    position: fixed;
  }

The idea is to never let html or body exceed the size of the viewport, lock them down completely, and then enable overflow scrolling only in the divs that need it. This also eliminates pull-to-refresh when the app is used inside the browser. (If you want PTR functionality in the app, of course you can watch for overscroll on a particular div and implement it yourself. But your app skeleton will stay put.)

[mvkel]

Thanks for sharing these! Locking down the size of the viewport did the trick