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 that either provide a common interface for going between the modes?

If not, are there any resources detailing all of the differences and gotchas between the two modes?

Things I've run into:

Long-polling is kinda weird. See this example.

window.innerWidth & window.innerHeight are inconsistent.

• Mobile Safari- vertical orientation works as expected, horizontal doesn't
  • Vertical
    • width- 768
    • height- 946
  • Horizontal
    • width- 769??
    • height- 518??
• Web App on Homescreen- These always make sense.
  • Vertical
    • width- 768
    • height- 1004
  • Horizontal
    • width- 1024
    • height- 748

Additional stuff:

I found this and this to be interesting.

This question also sheds some light on weird behaviors.

Answer 1

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