[PWA] Disable Text Selection and Touch Callouts in a PWA on iOS

Posted 2021-01-31 Answer1215

Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we‘re going for a more "native" feel.

We‘ll first disable the ability to select text in our app by setting the css user-select options to none.

Then, we‘ll disable the ios long-press "callout" menu by setting -webkit-touch-callout to none.

 

App.css

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
}