Some tags for making sites mobile friendly!
<meta name="apple-mobile-web-app-title" content="Site Title">
<meta http-equiv="cleartype" content="on" />
<meta name="MobileOptimized" content="width" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="app-icon.png"/> <!-- glossy -->
<link rel="apple-touch-icon-precomposed" href="app-icon.png"/> <!-- no gloss --><!-- iphone -->
<link rel="apple-touch-icon-precomposed" size="72x72" href="app-icon-72.png"/> <!-- ipad -->
<link rel="apple-touch-icon-precomposed" size="114x114" href="app-icon-114.png"/> <!-- ipad retina -->
<link rel="apple-touch-icon-precomposed" size="144x144" href="app-icon-144.png"/> <!-- iphone retina -->
Disable iOS gray overlay
* { -webkit-tap-highlight-color: rgba(0,0,0,0); } // all elements
a { -webkit-tap-highlight-color: rgba(0,0,0,0); } // only links
###Tips
- use "tap" event instead of "click"; the click event on iOS has a delay