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.)