JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

JavaScript

// forecast.io 

// remove browser bars http://kristoferlayon.com/2013/05/07/forecast-io-some-of-the-secret-sauce-revealed/

Hiding the Safari browser chrome and address bar
<meta name="apple-mobile-web-app-capable" content="yes">

Displaying a custom icon in the app drawer
<link rel="apple-touch-icon-precomposed" href="http://forecast.io/images/icons/54.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://forecast.io/images/icons/72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://forecast.io/images/icons/114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://forecast.io/images/icons/144.png">

// initial blog post 
http://blog.forecast.io/its-not-a-web-app-its-an-app-you-install-from-the-web/

// more explaination http://davidwalsh.name/hide-address-bar

// change status bar view

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    // can use black, default, & black translucent
    
//iOS startup image & icons
    
http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/

// Add to home screen pop up to direct users to add web app to home screen
http://cubiq.org/add-to-home-screen

// windows 7 tileable page
http://taylor.fausak.me/2012/02/03/windows-phone-7-web-page-tiles/

//fool safari toolbar into hiding after page load
$('body').delay('0').animate({ scrollTop: '0px' }, 'slow');