iOS 7 Icon Sizes
<!-- non-retina iPhone pre iOS 7 --> <link rel="apple-touch-icon" href="icon57.png" sizes="57x57"> <!-- non-retina iPad pre iOS 7 --> <link rel="apple-touch-icon" href="icon72.png" sizes="72x72"> <!-- non-retina iPad iOS 7 --> <link rel="apple-touch-icon" href="icon76.png" sizes="76x76"> <!-- retina iPhone pre iOS 7 --> <link rel="apple-touch-icon" href="icon114.png" sizes="114x114"> <!-- retina iPhone iOS 7 --> <link rel="apple-touch-icon" href="icon120.png" sizes="120x120"> <!-- retina iPad pre iOS 7 --> <link rel="apple-touch-icon" href="icon144.png" sizes="144x144"> <!-- retina iPad iOS 7 --> <link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
iOS Web App
Some cool stuff to make a website act more like an app on iOS. Full details here.
Specifying a Startup Image
<link rel="apple-touch-startup-image" href="/startup.png">
Hiding Safari User Interface Components (also adds it to the task bar like an app)
<meta name="apple-mobile-web-app-capable" content="yes" />
Changing the Status Bar Appearance
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Touch Icons
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />
Mobile Device Detection with jQuery
$(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
//do something
}
});
Recent Comments