Mobile safari vs home-screen webapp

问题:

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.

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

回答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)

回答3:

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

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

回答4:

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.