Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
HTML5 webapps broken on the iPad (martijnpannevis.nl)
23 points by PanMan on April 21, 2010 | hide | past | favorite | 8 comments


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... and http://github.com/280north/cappuccino/commit/9f50f0806528d03...).

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


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


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


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

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


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.


But they still scale pages by default. You have to set the viewport to "initial-scale=1.0, user-scalable=no" to get the same behavior as desktop browsers (and it does work, but I don't know if the other configuration options of the viewport work)


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


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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: