Mobile web app - techniq/wiki GitHub Wiki

Web app manifest

Disable zooming when focusing inputs

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Safe area

<meta name="viewport" content="viewport-fit=cover" />

div {
  padding-bottom: env(safe-area-inset-bottom);
}

Fix "Untitled" in iOS back button

(untested)

<meta name="apple-mobile-web-app-title" content="This Is My Web App">

Disable touch zooming

body {
  touch-action: pan-x pan-y;
}

Remove flash of gray on tap

body {
  -webkit-tap-highlight-color: transparent;
}

Detect if app is running standalone

Javascript

isInWebAppiOS = (window.navigator.standalone === true);
isInWebAppChrome = (window.matchMedia('(display-mode: standalone)').matches);

CSS

@media all and (display-mode: standalone) {
  body {
    border: 5px solid black;
  }
}

Tailwind

<div class="[@media(display-mode:standalone)]:block" />

Remove hover on mobile

Instead of

button:hover {
  background-color: red;
}

Use

@media (hover: hover) and (pointer: fine) {
  button:hover {
    background-color: red;
  }
}

or using tailwind

tailwind.config.cjs

{
  future: {
    hoverOnlyWhenSupported: true
  }
}

Additional head properties

<!-- Allow web app to be run in full-screen mode - iOS. -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Allow web app to be run in full-screen mode - Android. -->
<meta name="mobile-web-app-capable" content="yes">

<!-- Make the app title different than the page title - iOS. -->
<meta name="apple-mobile-web-app-title" content="Mobile web app title">

<!-- Configure the status bar - iOS. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Disable automatic phone number detection. -->
<meta name="format-detection" content="telephone=no">

<!-- Android dock color -->
<meta name="theme-color" content="#fff">

<!-- Windows dock color -->
<meta name="msapplication-TileColor" content="#fff">

Resources