5 ms·

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That's objectively BS and 100 % skill issue on your side. A simp

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That's objectively BS and 100 % skill issue on your side. A simple "disable zoom PWA" search on google would definitely give a bunch of sites telling you how to do it. It's super simple, just add a viewport meta tag.

beretguy 3y ago
> That's objectively BS and 100 % skill issue on your side. Why so aggressive?
- fodkodrasz 3y ago
  It is 100% a skill issue (in communications skills)
mvkel 3y ago
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 3y ago
  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 3y ago
    Thanks for sharing these! Locking down the size of the viewport did the trick

beretguy 3y ago

> That's objectively BS and 100 % skill issue on your side. Why so aggressive?

fodkodrasz 3y ago
It is 100% a skill issue (in communications skills)

mvkel 3y ago

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 3y ago
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 3y ago
  Thanks for sharing these! Locking down the size of the viewport did the trick