Skip to content

Instantly share code, notes, and snippets.

@roine

roine/helper.js

Last active December 17, 2015 10:49
Show Gist options
  • Save roine/5597346 to your computer and use it in GitHub Desktop.
Save roine/5597346 to your computer and use it in GitHub Desktop.
Download ZIP
web app helper
Raw
helper.js
var helper = window.helper = {
/*
Boolean
*/
isiPad: navigator.userAgent.match(/iPad/i) != null,
isRetina: window.devicePixelRatio && window.devicePixelRatio > 1,
isOnline: navigator.onLine,
isWebAppMode: window.navigator.standalone || false,
landscape: function(){ return Math.abs(helper.orientation) === 90; },
portrait: function(){ return !helper.landscape() },
/*
Others information
*/
// return current orientation 0,90,-90,180
orientation: window.orientation,
OSVersion: function(){
var OS = window.navigator.appVersion.match(/OS (\d+_\d+)/i);
return OS && OS[1] ? +OS[1].replace('_', '.') : 0;
}
}
// scroll to hide the URL
window.scrollTo(0, 1);
// Download fast click first (https://github.com/ftlabs/fastclick), remove the 300ms latency on ios safari
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
// block scrolling
$('body').bind("touchmove", function(event){
event.preventDefault();
});
Raw
index.html
<head>
<!-- not scalable -->
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- For old support http://davidbcalhoun.com/tag/handheldfriendly -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<!-- http://www.microsoft.com/typography/whatiscleartype.mspx -->
<meta http-equiv="cleartype" content="on">
<!-- the page is duplicate content of a desktop version -->
<link rel="canonical">
<!-- Application name for win 8 and maybe others later -->
<meta name="application-name" content="Multibank Fx"/>
<!-- IOS WebAppable -->
<!-- remove url when on app mode -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- set to black status bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Web app title supported from IOS 6 -->
<meta name="apple-mobile-web-app-title" content="Title of web app">
<!-- set the icon of the app -->
<link rel="apple-touch-icon-precomposed" href="app-icon.png">
<!-- The difference with the above one, is that the icon will be less good quality -->
<link rel="apple-touch-icon" href="app-icon.png">
<!-- display a smart banner to download an app -->
<meta name="apple-itunes-app" content="app-id=9_CHARS_ID">
<!-- image to display on standalone mode while loading -->
<!-- ipad portrait -->
<link rel="apple-touch-startup-image" href="loadingpage-768-1004.jpg" sizes="768x1004" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- ipad landscape -->
<link rel="apple-touch-startup-image" href="loadingpage-748-1024.jpg" sizes="1024x748" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- Windows 8 Appable -->
<!-- http://www.buildmypinnedsite.com/ -->
<meta name="msapplication-TileColor" content="#BC0000" />
<meta name="msapplication-TileImage" content="app-icon.png" />
</head>
<body>
<!-- remove the auto capitalisation -->
<input autocapitalize="none">
<!-- remove the auto correct -->
<input autocorrect="off" />
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment