iOS

Stop iOS Web app links from launching Safari

delboy1978ukLeave a comment

You may have noticed that if you have made your website into an iOS webapp, that <a> tags leave the app and launch in Safari, which is slightly irritating. To fix this, it’s just a little Javascript:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

 

iOS Web App Icons and Loading Screens

delboy1978uk, , , , , , , , 1 Comment

There’s a stack of different icon sizes and splash screen sizes now, depending which iPod, iPhone, or iPad you are using. iPad can also splash screen in Landscape, iPhone 5 has a different aspect ratio, etc! It has been a while since I last made web app icons etc, so I brought myself up to speed, and found the following Gist on Github:


<!doctype html>
<!– http://taylor.fausak.me/2015/01/27/ios-8-web-apps/ –>
<html>
<head>
<title>iOS 8 web app</title>
<!– CONFIGURATION –>
<!– Allow web app to be run in full-screen mode. –>
<meta name="apple-mobile-web-app-capable"
content="yes">
<!– Make the app title different than the page title. –>
<meta name="apple-mobile-web-app-title"
content="iOS 8 web app">
<!– Configure the status bar. –>
<meta name="apple-mobile-web-app-status-bar-style"
content="black">
<!– Set the viewport. –>
<meta name="viewport"
content="initial-scale=1">
<!– Disable automatic phone number detection. –>
<meta name="format-detection"
content="telephone=no">
<!– ICONS –>
<!– iPad retina icon –>
<link href="https://placehold.it/152"
sizes="152×152"
rel="apple-touch-icon-precomposed">
<!– iPad retina icon (iOS < 7) –>
<link href="https://placehold.it/144"
sizes="144×144"
rel="apple-touch-icon-precomposed">
<!– iPad non-retina icon –>
<link href="https://placehold.it/76"
sizes="76×76"
rel="apple-touch-icon-precomposed">
<!– iPad non-retina icon (iOS < 7) –>
<link href="https://placehold.it/72"
sizes="72×72"
rel="apple-touch-icon-precomposed">
<!– iPhone 6 Plus icon –>
<link href="https://placehold.it/180"
sizes="120×120"
rel="apple-touch-icon-precomposed">
<!– iPhone retina icon (iOS < 7) –>
<link href="https://placehold.it/114"
sizes="114×114"
rel="apple-touch-icon-precomposed">
<!– iPhone non-retina icon (iOS < 7) –>
<link href="https://placehold.it/57"
sizes="57×57"
rel="apple-touch-icon-precomposed">
<!– STARTUP IMAGES –>
<!– iPad retina portrait startup image –>
<link href="https://placehold.it/1536×2008"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait)"
rel="apple-touch-startup-image">
<!– iPad retina landscape startup image –>
<link href="https://placehold.it/1496×2048"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape)"
rel="apple-touch-startup-image">
<!– iPad non-retina portrait startup image –>
<link href="https://placehold.it/768×1004"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 1)
and (orientation: portrait)"
rel="apple-touch-startup-image">
<!– iPad non-retina landscape startup image –>
<link href="https://placehold.it/748×1024"
media="(device-width: 768px) and (device-height: 1024px)
and (-webkit-device-pixel-ratio: 1)
and (orientation: landscape)"
rel="apple-touch-startup-image">
<!– iPhone 6 Plus portrait startup image –>
<link href="https://placehold.it/1242×2148"
media="(device-width: 414px) and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait)"
rel="apple-touch-startup-image">
<!– iPhone 6 Plus landscape startup image –>
<link href="https://placehold.it/1182×2208"
media="(device-width: 414px) and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape)"
rel="apple-touch-startup-image">
<!– iPhone 6 startup image –>
<link href="https://placehold.it/750×1294"
media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!– iPhone 5 startup image –>
<link href="https://placehold.it/640×1096"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!– iPhone < 5 retina startup image –>
<link href="https://placehold.it/640×920"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!– iPhone < 5 non-retina startup image –>
<link href="https://placehold.it/320×460"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!– HACKS –>
<!– Prevent text size change on orientation change. –>
<style>
html {
-webkit-text-size-adjust: 100%;
}
</style>
</head>
<body>
<h1>iOS 8 web app</h1>
</body>
</html>

view raw

ios-8-web-app.html

hosted with ❤ by GitHub

Very handy 🙂

<!– Run in full-screen mode. –>
<meta name=“apple-mobile-web-app-capable” content=“yes”>
<!– Make the status bar black with white text. –>
<meta name=“apple-mobile-web-app-status-bar-style” content=“black”>
<!– Customize home screen title. –>
<meta name=“apple-mobile-web-app-title” content=“Web App”>
<!– Disable phone number detection. –>
<meta name=“format-detection” content=“telephone=no”>
<!– Set viewport. –>
<meta name=“viewport” content=“initial-scale=1”>
<!– Prevent text size adjustment on orientation change. –>
<style>html { –webkit–text–size–adjust: 100%; }</style>
<title>iOS 7 Web App</title>
<!– Icons –>
<!– iOS 7 iPad (retina) –>
<link href=“/static/images/apple-touch-icon-152×152.png”
sizes=“152×152”
rel=“apple-touch-icon”>
<!– iOS 6 iPad (retina) –>
<link href=“/static/images/apple-touch-icon-144×144.png”
sizes=“144×144”
rel=“apple-touch-icon”>
<!– iOS 7 iPhone (retina) –>
<link href=“/static/images/apple-touch-icon-120×120.png”
sizes=“120×120”
rel=“apple-touch-icon”>
<!– iOS 6 iPhone (retina) –>
<link href=“/static/images/apple-touch-icon-114×114.png”
sizes=“114×114”
rel=“apple-touch-icon”>
<!– iOS 7 iPad –>
<link href=“/static/images/apple-touch-icon-76×76.png”
sizes=“76×76”
rel=“apple-touch-icon”>
<!– iOS 6 iPad –>
<link href=“/static/images/apple-touch-icon-72×72.png”
sizes=“72×72”
rel=“apple-touch-icon”>
<!– iOS 6 iPhone –>
<link href=“/static/images/apple-touch-icon-57×57.png”
sizes=“57×57”
rel=“apple-touch-icon”>
<!– Startup images –>
<!– iOS 6 & 7 iPad (retina, portrait) –>
<link href=“/static/images/apple-touch-startup-image-1536×2008.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 & 7 iPad (retina, landscape) –>
<link href=“/static/images/apple-touch-startup-image-1496×2048.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 iPad (portrait) –>
<link href=“/static/images/apple-touch-startup-image-768×1004.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)”
rel=“apple-touch-startup-image”>
<!– iOS 6 iPad (landscape) –>
<link href=“/static/images/apple-touch-startup-image-748×1024.png”
media=“(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)”
rel=“apple-touch-startup-image”>
<!– iOS 6 & 7 iPhone 5 –>
<link href=“/static/images/apple-touch-startup-image-640×1096.png”
media=“(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 & 7 iPhone (retina) –>
<link href=“/static/images/apple-touch-startup-image-640×920.png”
media=“(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)”
rel=“apple-touch-startup-image”>
<!– iOS 6 iPhone –>
<link href=“/static/images/apple-touch-startup-image-320×460.png”
media=“(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)”
rel=“apple-touch-startup-image”>