Horizontal Scrolling

Inertia-less Scrolling

  -webkit-overflow-scrolling

nav {
  overflow-x: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

meta tags

<meta content="width=device-width, 
               initial-scale=1, 
               maximum-scale=2, 
               user-scalable=no" 
      name="viewport" />

Viewport meta tag

With

Without

Title Text

    <!-- iPad retina icon -->
    <link href="apple-touch-icon-precomposed-152x152.png"
          sizes="152x152"
          rel="apple-touch-icon-precomposed">
 
    <!-- iPad retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-144x144.png"
          sizes="144x144"
          rel="apple-touch-icon-precomposed">
 
    <!-- iPad non-retina icon -->
    <link href="apple-touch-icon-precomposed-76x76.png"
          sizes="76x76"
          rel="apple-touch-icon-precomposed">
 
    <!-- iPad non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-72x72.png"
          sizes="72x72"
          rel="apple-touch-icon-precomposed">
 
    <!-- iPhone 6 Plus icon -->
    <link href="apple-touch-icon-precomposed-180x180.png"
          sizes="120x120"
          rel="apple-touch-icon-precomposed">
 
    <!-- iPhone retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-114x114.png"
          sizes="114x114"
          rel="apple-touch-icon-precomposed">
 
    <!-- iPhone non-retina icon (iOS < 7) -->
    <link href="apple-touch-icon-precomposed-57x57.png"
          sizes="57x57"
          rel="apple-touch-icon-precomposed">

Home Icons

    <!-- Allow web app to be run in full-screen mode. -->
    <meta name="apple-mobile-web-app-capable"
          content="yes">
 
    <!-- Make the app title different than the page title. -->
    <meta name="apple-mobile-web-app-title"
          content="iOS 8 web app">
 
    <!-- Configure the status bar. -->
    <meta name="apple-mobile-web-app-status-bar-style"
          content="black">

    <!-- iPad retina portrait startup image -->
    <link href="apple-touch-startup-image-1536x2008.png"
          media="(device-width: 768px) and (device-height: 1024px)
                 and (-webkit-device-pixel-ratio: 2)
                 and (orientation: portrait)"
          rel="apple-touch-startup-image">

Full Page Web App

{
  "name": "Web Application Manifest Sample",
  "icons": [
    {
      "src": "launcher-icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    },
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "launcher-icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": "1.5"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": "3.0"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": "4.0"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Chrome 31+

Target Size

Icons

Large Target Size

Click Events

Mobile Events

• touchstart
• touchmove
• touchend
• click
• dblclick

fs-click

angular.module('ngSharedComponents').directive('fsClick', ['$window', function($window) {
  var isTouchDevice = !!("ontouchstart" in $window);
  return function(scope, elm, attrs) {
    if (isTouchDevice) {
      var tapping = false;
      elm.bind('touchstart', function(evt) {  tapping = true; });
      elm.bind('touchmove', function(evt) {  tapping = false; });
      elm.bind('touchend', function(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        tapping && scope.$apply(attrs.fsClick);
      });
    } else {
      elm.bind('click', function(evt) {
        scope.$apply(attrs.fsClick);
      });
    }
  };
}]);