Mobile safari vs home-screen webapp

Question

I am developing a webapp for iOS, and I\'ve noticed some weird things between running on mobile safari and running from the homescreen.

Are there any resources t

Answer 1

There are four options that Apple supports on Home Screen apps: icon, splash screen, hiding of toolbar and setting status bar mode.

See https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW3.

Answer 2

When using

<meta name="viewport" content="user-scalable = no, width = device-width" />

you will get your window.innerWidth's!!!

When using

<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" />

you will get >> landscape: 1024 x 690 & portrait: 768 x 946 ('safari' mode)

Answer 3

If you're building an app for mobile, you may want to take a look at Sencha Touch which takes away the headache of managing the nuances in mobile devices.

Then you can just build your regular web app beside it.

Answer 4

I don't think Apple has publicly documented the attributes of the full screen web apps in iOS, so anything you find may be anecdotal, and therefore not reliable enough to depend on in future releases.

You may have better luck building an application which has just a UIWebView rendering your web app. The view modes for iOS applications are clearly defined and well documented, and the application can provide other features you may need in the future (such as local notifications, background execution, custom URL handlers).