Is there any way in CSS or Javascript to tell if a user is viewing an HTML page on their iPad as a web app?

Question

Pretty simple question, I have a webpage that is used exclusively on iPads. I've set it up so that you can save it to the home screen and use it as a web app.

What I'm wondering is if there is a way via Javascript or CSS to tell if the page is being viewed from within the browser with all of the navigation stuff at the top, or if it was launched and is being browsed as a web app.

I tried using media queries to set up different styles for web app vs with-navigation browser, but I couldn't figure out a query that would work.

Answer 1

Aha, found it in the Safari docs: window.navigator.standalone

Answer 2

just a stab in the dark, but perhaps you can take a look at the location/url of the currently displayed file - you should be able to tell the difference of a file on the desktop vs one served from a webserver.

Answer 3

Its a shame you need to use JS for this, but that's the way it is I suppose. You could really selectively target the browser via some sophisticated media-queries (you can use conditionals for instance), but you've probably tried that. Finally, if you are going to use JS anyway (the standalone is something I only recently discovered myself) you might also want to consider using Modernizr - a simple bit of JS that will add classes to the HTML tag based on the browsers capabilities which is in theory a better way of targeting the browser for certain styles/behaviors than querying the client name/properties via JS since that in theory can be spoofed. For instance, Modernizr will add a class based on whether or not css3 border radius is possible.