14

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.

Community
  • 1
  • 1
beatgammit
  • 19,817
  • 19
  • 86
  • 129
  • The first bug example works well for me as a home screen app on iPad iOS 4.3. What happens when u do it? – ampersand May 18 '11 at 19:10
  • @ampersand - Hmm, I guess it works on iPad 2 (I just tested it on v 4.3.2), but on iPod 4g (v. 4.3.2) and iPod 2g (v. 4.2.1) it doesn't work (no bug moving). I already sold my iPod 1, but I think it didn't work there either. Point being, browser as homescreen app is not the same as regular mobile safari. – beatgammit May 18 '11 at 20:52
  • FWIW, web apps launched from the home screen use an entirely different JavaScript engine than what is used in mobile safari (Nitro). See http://www.theregister.co.uk/2011/03/15/apple_ios_throttles_web_apps_on_home_screen/ – Matt Bridges Jun 24 '11 at 01:22
  • @Matt Bridges- Yeah, I think I read somewhere that it is because of a security issue that doesn't allow some API access outside of the browser. – beatgammit Jun 24 '11 at 02:09
  • has solved：http://stackoverflow.com/questions/2738766/iphone-webapps-is-there-a-way-to-detect-how-it-was-loaded-home-screen-vs-safar – raindrop_boy Jun 18 '13 at 07:54

4 Answers4

6

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

RyanR
  • 7,728
  • 1
  • 25
  • 39
  • Hmm.. that's pretty lame. I can't put my app in the app store (legal reasons) and I'd like to not worry about maintaining different packages for different platforms anyway. I guess maybe I'm out of luck? – beatgammit Jun 24 '11 at 00:31
  • Take a look at the [WWDC 2011 session videos](http://developer.apple.com/videos/wwdc/2011) on web applications - I didn't attend any of those sessions, but Apple may have released some new info that'll help you. – RyanR Jun 24 '11 at 01:19
  • I hope that Apple fixes this problem in iOS 5. I'll go ahead and upmark your answer. – beatgammit Jun 26 '11 at 17:20
  • I'm going to go ahead and award the bounty. The question isn't 100% solved, but it seems that iOS 5 is my best bet. I think I'll just force my users to use my app as a home-screen app so I only have to code for one platform. – beatgammit Jun 27 '11 at 08:43
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)

SpicyApps
  • 21
  • 1
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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Ohad Kravchick
  • 1,154
  • 11
  • 15
  • +1 because this is actually kind of useful. It doesn't really answer the question, but it adds pertinent info. – beatgammit Jul 09 '11 at 04:47
0

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.

JamesHalsall
  • 13,224
  • 4
  • 41
  • 66
  • Good suggestion, but I don't think it would work for my app. My app isn't like regular web-apps (no screen transitions, menus, etc), just a canvas, some overlays and the canvas always needs to stay visible. It's basically mapping software. – beatgammit May 18 '11 at 18:12