I ran into some interesting challenges while working on a site this week. Like any good developer, I ran to the web to search for a solution. However, I couldn’t find any solutions that addressed my specific problems. Both problems concerned differences in behavior between Safari and the bookmarked web app. One problem had to do with caching on both the iPad and iPhone, and the other had to do with a background display on the iPad.
Then I brought out my iPad to check out the site there. Pulled up the site in Safari, and everything was beautiful. Launched the web app, and the background had disappeared. On the heels of the iPhone caching issue, I figured that I had another new caching problem (even though the other fix should have fixed it). After much problem-solving and searching I found an obscure Apple Knowledge Base article about the size of images allowed on iOS devices. My image was smaller than the limitations presented in the article, but it caused me to think about the size of the image. The image is around 1300px wide, and the div was sized to display it all. So, I started playing with the size of the div that had the background image. I reduced the size to 1024px, and it showed right up.
Here are the meta tags I have in the head that apply to the web app:
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
Anyway, these behaviors were unusual, and they had me stumped. So, I thought I’d share. I hope it helps.