Native-like app settings

by Kenneth Luplau-Brøgger

HTML

<html>
  
  <head>
    <meta name="apple-mobile-web-app-title" content="Wise Versus">
    <meta name="apple-itunes-app" content="app-id=583859770">
    <meta name="viewport" content="width=320.1, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" sizes="114x114"...

CSS

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

JavaScript

$(document).bind('touchmove', function (e) {
  if ($("body").scrollTop == 0 || $("body").scrollTop == $("body").height() - $(window).height()) {
    e.preventDefault();
  }
});

if (("standalone" in window.navigator) && !window.navigator.standalone) {
  $("#content").empty().html("<h1>Add as web app</h1>");
}