Skip to content

Instantly share code, notes, and snippets.

@svrooij
Created April 26, 2015 09:36
Show Gist options
  • Save svrooij/6cbf6c66986d9efd8f2e to your computer and use it in GitHub Desktop.
Save svrooij/6cbf6c66986d9efd8f2e to your computer and use it in GitHub Desktop.
Improve your mobile webapp
<html>
<head>
<title>Your nice webapp</title>
<!-- add from here -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="iOS 8 web app">
<meta name="viewport" content="initial-scale=1">
</head>
<body>
<!-- Your javscript files should always be at the bottom of your page for faster loading -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/mobile-app.js"></script>
</body>
</html>
if(window.navigator.standalone){
// Add a 20px padding (for statusbar) to the right element
$('body').css('padding-top','20px');
//Make sure the links don't open Mobile Safari
$(document).on("click","a",function(event){
event.preventDefault();
location.href = $(event.target).attr("href");
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment