By default, mobile browsers add artificial 300 ms delay between the time you release your finger (onTouchEnd) and before a click event is triggered. This is a nice accessibility feature for normal web pages that aren't optimized for mobile browsers, but for web apps that are designed to look and feel native, this is unwanted behavior.

There used to be some nasty workarounds, but browser vendors decided to remove this delay for mobile-friendly (or mobile-optimized) websites. This means that pages that use this header aren't affected by tap delay:

<meta name="viewport" content="width=device-width">

This meta variable tells the browser to set its width to the device width with respect to the pixel density. For example, for iPhone 6 with 1334 x 750 screen resolution, and pixel density 2, the page will be rendered in a browser window with a 667 x 375 resolution. Now as a side effect, it also turns off the tap delay.

We recommend that you use this header for all examples in...