移动野生动物园与主屏幕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).

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

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