

HTML5 webapps broken on the iPad - PanMan
http://martijnpannevis.nl/blog/2010/04/21/html5-webapps-and-the-ipad/

======
tlrobinson
The title is incorrect, the broken features have nothing to do with HTML5.

These features haven't been removed entirely, but as I found when I tried to
add them to Cappuccino some of them are very buggy
([http://github.com/280north/cappuccino/blob/master/Tools/capp...](http://github.com/280north/cappuccino/blob/master/Tools/capp/Resources/Templates/Application/index.html#L16-22)
and
[http://github.com/280north/cappuccino/commit/9f50f0806528d03...](http://github.com/280north/cappuccino/commit/9f50f0806528d038ac035a9f882ed983ac9f9239)).

"apple-touch-icon" and "apple-mobile-web-app-capable" work as expected, as do
HTML5 cache manifests.

Setting the viewport meta tag to "initial-scale=1.0, user-scalable=no" also
works as expected, which is what I needed to get Cappuccino applications to
display correctly (this is probably what you want for most JavaScript
"applications"). I didn't try any other configurations. This works in both
MobileSafari and applications saved to the home screen.

I tried "apple-mobile-web-app-status-bar-style" with "black" (default) and
"black-translucent", both seemed to work for me, but I stuck with the default.

The biggest problem is with the default image, i.e. "apple-touch-startup-
image". For some insane reason it expects the PNG to be 748px wide by 1024px
tall. This aspect ratio implies the image should be portrait oriented, yet the
20px for the status bar is taken from the narrower dimension, implying that it
should be landscape oriented.

And in fact the image is scaled from 748x1024 to 768x1004. There is no way
around this AFAICT.

Original default.png image: <http://cl.ly/JCs> Displayed in portrait
orientation: <http://cl.ly/IyM> Displayed in landscape orientation:
<http://cl.ly/Ibx>

The only way to get something reasonable is to squash your default image in
the opposite direction. That is, start with a 748x1024 image, crop it to
768x1004, then scale it _back_ to 748x1024. Unfortunately then you end up with
a white bar along one edge in landscape mode. Madness.

If I'm mistaken about any of this I'd love to know.

------
Sephr
<link rel="apple-touch-icon" href="/custom_icon.png"/> Isn't HTML5, it doesn't
even have the the correct sizes property or rel. <link rel="icon"
href="/custom_icon.png" sizes="72x72 57x57" type="image/png"/> is the correct
HTML5 code. I don't have an iPad, but I'm pretty sure that since they support
so much HTML5, they might also support HTML5 icons.

------
comex
This has nothing to do with HTML5, and it's probably just a bug. Report it to
Apple.

------
towndrunk
Did he even read the article he linked to...

"There’s proprietary Apple markup on our HTML5 page."

------
iaskwhy
Maybe Apple decided to not support those options on the iPad because it has a
bigger screen and sites made for the viewport of the iPhone would look really
bad on the iPad? Makes sense to me.

~~~
cgranade
If so, then why have a viewport setting at all? Seems a little odd, really.

~~~
iaskwhy
You mean on the iPhone? It makes sense to adjust the zoom of the page since
it's a much smaller size. Or I just didn't understand your question...

