iOS-Web-App

KO | EN

gitlite — search

#javascript #python #react #ai #typescript #android #machine-learning #rust #docker #nodejs #kubernetes #mcp #ios #openai

(★ 48)

There are a lot of things you have to setup to cover all Apple devices when creating an iOS friendly Web App. I will keep track of them here.

iOS-Web-App Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

#iOS Web Apps

There are a lot of things you have to setup to cover all Apple devices when creating an iOS friendly Web App. I will keep track of them here.

##App Titles and viewports
Here we need to setup a few things for your application. The App Viewport (The one below is iPhone 5 friendly - People have had issues with other viewport tags), Status bar styles, Telephone number format detection, fullscreen your app (removes Safari UI elements), the App title, if this is not set it fallbacks to your title tag and finally, preventing bouncing on scroll.

A little more on the iPhone 5 viewport tag: Using width-device-width strangely makes the app height the size of a 4S and lower, it also prevents splash screens from viewing at their correct, iPhone 5, height. Below is the iPhone 5 freiendly viewport tag.

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

<meta name="format-detection" content="telephone=no">
    
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    
    <meta name="apple-mobile-web-app-title" content="App Title">

<script type="text/javascript">
      document.ontouchmove = function(e) {e.preventDefault()};
    </script>

##App Icons
Sigh. There's a lot of different sizes needed to fit certain sized devices and their retina versions. Each line also has it's precomposed version to stop iOS adding effects to the icon. The sizes for these icons are in brackets in the comments.

<link rel="apple-touch-icon" href="/path">
    <link rel="apple-touch-icon-precomposed" href="/path">
    
    
    
    <link rel="apple-touch-icon" sizes="72x72" href="/path">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/path">
    
    
    
    <link rel="apple-touch-icon" sizes="114x114" href="/path">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/path">
    
    
    
    <link rel="apple-touch-icon" sizes="144x144" href="/path">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/path">

##App Splash/Start screens
A few splash screen sizes are required, and also their portrait and landscape versions.

As said above, iPhone 5 splash screens will be ignored and 4 & 4S screens will be used if your viewport tag uses 'width-device-width'.

<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="/path">
    
    
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="/path">
    
    
    <link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="/path">
    
    
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/path" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)">
    
    
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/path" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">
    
     
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/path" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2)">
    
    
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/path" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2)">
    
##Preventing links from opening in Safari
It's rather annoying that links, by default, open in Safari. This means that your apps pages suddenly jump into Safari. I found this [Gist](https://gist.github.com/irae/1042167), by [Iraê Carvalho](https://github.com/irae) that fixes this problem. Add this script into your `<head>`:

##Footnote
If you're reading this, I hope I have helped and if you have any questions you can find me on [Twitter](http://twitter.com/andrewhathaway). Thanks.

iOS-Web-App

iOS-Web-App Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

iOS-Web-App

iOS-Web-App Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README