Mobile safari vs home-screen webapp

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).


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.


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)