Category Archives: Mobile Safari

What You Can Do with Web Apps in HTML5: A Response

Share this:  
Leave a comment

Hello all, I felt the need to respond to a discussion that was had on Web Apps and HTML5 on the tech show “The Gillmor Gang”… the “Pinch and Spread” episode. What was said was interesting but it seemed to be that the gang was coming to conclusions based on too limited a view of what HTML  5 was capable of. The embedded video I hope explains it all more fully. Hopefully you can pardon my excessive use of vocal pauses (umm), and you will still get a good grounding of the potential that HTML 5 has and what it can to do for the mobile space.

Link to discussion on programmatically determining if the browser is running on a regular iPad or an iPad Mini:   Detecting iPad Mini in HTML5
How to Detect iPad Mini Using Javascript
Note regarding the two links above: After looking into this deeper it seems that the difference in the values for availableWidth and availableHeight are due to the different tab counts when testing this code. So this is probably not very useful after all. 🙁

Amazon link to book:   Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark. Note that I bought this also as an eBook on Apple’s iBooks and some of the page formatting in the reader there is really screwed up.

Related Chomer.com Posts:
Programmatically Determining if in Full Screen Mode in Mobile Safari

Programmatically Determining if in Full Screen Mode in Mobile Safari

Share this:  
One comment

Building a site that you want to be a web app on an iPhone, iPad, or iPod Touch?

Full Screen Detection:

Consider this meta tag:

<meta name="apple-mobile-web-app-capable" content="yes" />

If you add this to your Mobile Safari web page your page will open in full screen mode…  IF you added your page as a shortcut to your Home screen and IF you launched it from that shortcut! Otherwise if you open the page from the standard mobile Safari icon it will not be in full screen!

You might have seen how some sites have a popup balloon that points to the    button with a message on how to add to the Home screen. The popup only shows up when your not in full screen mode. How do they do this?

Mobile Safari has the following property:

window.navigator.standalone

If this property is true, we are in full screen. False, we are not in full screen!

Consider adding to your JavaScript function called by the page’s onload event something like the following:

if ("standalone" in window.navigator && !window.navigator.standalone) {   
   // code here to create a div displaying our help balloon and positioning it
   // properly on the screen.
} // end if 

Recommended Post:

Do you want to look into this subject in more detail? Ben Nadel has written an excellent post on his blog: Detecting iPhone’s App Mode (Full Screen Mode) For Web Applications.

A JavaScript Library:

Looking for  a JavaScript library that you can add to your project to do the work for you? Matteo Spinelli on his site cubiq.org has created one for you. Go to his Add to Home Screen page to find out all the details. He’s even got a QR barcode that you can use with your iPhone to test it out!

If you go to the test page on your iPhone in Mobile Safari it will do this little balloon animation on the screen where it slides from the top down so    that it ends up pointing at the  button (see screen shot below):

The JS Library is downloadable for free but Matteo will take donations via PayPal or Flattr.

Code. I have to say I downloaded the library and looked at the code. Matteo put a lot of effort into this thing. it supports multiple languages and does all sorts of fancy stuff! Enough said.