4 ms·

HTML5 webapps broken on the iPad

• iaskwhy 17y ago
  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 17y ago
    If so, then why have a viewport setting at all? Seems a little odd, really.
    • iaskwhy 17y ago
      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...
  • tlrobinson 17y ago
    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)
• towndrunk 17y ago
  Did he even read the article he linked to... "There’s proprietary Apple markup on our HTML5 page."
• tlrobinson 17y ago
  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/Resources/Templates/Application/index.html#L16-22 http://github.com/280north/cappuccino/blob/master/Tools/capp... and http://github.com/280north/cappuccino/commit/9f50f0806528d038ac035a9f882ed983ac9f9239 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 http://cl.ly/JCs Displayed in portrait orientation: http://cl.ly/IyM http://cl.ly/IyM Displayed in landscape orientation: http://cl.ly/Ibx 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.
• comex 17y ago
  This has nothing to do with HTML5, and it's probably just a bug. Report it to Apple.
• Sephr 17y ago
  <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.