Your comments
interestingly the mobile web app software already has the function in place but because it opens things in new tabs it doesn't really work too well.
Okay! So I have an update to this since I'm now (at last!) back in front of a computer. In terms of changes to the system as it stands, only minor additions and alterations between the <head> tags should be necessary. The following tags are generally how I do it:
<!-- Initial flags for browser -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- decide an appropriate hex colour for the borders on Mobile Chrome below -->
<meta name="theme-color" content="#1e1f21">
<!-- Covering the bases serving mobile app icons -->
<link rel="icon" sizes="192x192" href="image/advertise-4x.png">
<link rel="apple-touch-icon" href="image/advertise-4x.png">
<link rel="shortcut icon" href="image/advertise-0-75x.png" type="image/x-icon">
<!-- Finally, linking to the manifest file for configuration -->
<link rel="manifest" href="manifest.json">
The above code is roughly what I would use to serve up content that should run on pretty much anything capable of running the site itself. This should cover all current and past smartphones on iOS and Android. An example manifest file can be found here.
This allows the functionality to operate as described in my opening post, however far more detailed implementation is possible right down to specific types of device if you find a particular issue, or want to override behaviour on particular platforms.
Here's some documentation detailing the iOS functions:
- Specifying icon (apple call this a web clip)
- Viewport configuration (Should already be fine but for reference)
- Customising iOS Status Bar preference (My code hides it but you can change the colour of it instead to give more screen space)
And here's some for the android equivalent and additional options:
- Install to Homescreen Info (explaining mobile web apps)
- Explanation of AppCache function (use caution with this)
- Android Splash Screen functionality (Google's preferred design)
The only thing to look out for when doing this is that if a user is forced into a new tab (like these links will do as I've checked the box), it will move them to their browser in the same way that opening a link in Twitter/Skype/Email/Messages would do.
The user experience between OSes is very similar. The only notable differences being that Android devices can colour code their border (not featured in OSX) and Android users can have a splash screen for the 'app' displayed on launch. I believe this behaviour can be disabled but at the very least it can be modified to better suit the app.
In terms of browsing the website, the user experience is identical to using the existing Safari or Chrome browsers but with more screen space available.
I can provide sample code for doing this and links to references in Android and iOS documentation but that'll need to wait until I return home on Tuesday as I'm writing this in an airport departure lounge.
Yep, this seems to have been resolved now. No more bug!
This issue also appears to affect the cropping of submission thumbnails. Throws a CORS exception in my browser console which could be behind it but that's just a bit of a guess based on what I can see.
Customer support service by UserEcho
Support software*, not web app software… My mind is all over the place tonight.