I'm wondering if it's possible to detect whether a browser is running on iOS, similar to how you can feature detect with Modernizr (although this is obviously device detection rather than feature detection).
Normally I would favour feature detection instead, but I need to find out whether a device is iOS because of the way they handle videos as per this question YouTube API not working with iPad / iPhone / non-Flash device
In order to detect the iOS version, one has to destructure the user agent with a Javascript code like this:
var isiOSSafari = (navigator.userAgent.match(/like Mac OS X/i)) ? true: false;
The user-agents on iOS devices say iPhone or iPad in them. I just filter based on those keywords.
I wrote this a couple years ago but i believe it still works:
Wherever possible when adding Modernizr tests you should add a test for a feature, rather than a device or operating system. There's nothing wrong with adding ten tests all testing for iPhone if that's what it takes. Some things just can't be feature detected.
For instance on the iPhone (not the iPad) video cannot be played inline on a webpage, it opens up full screen. So I created a test 'no-inpage-video'
You can then use this in css (Modernizr adds a class
.no-inpagevideo
to the<html>
tag if the test fails)This will hide the video on iPhone (what I'm actually doing in this case is showing an alternative image with an onclick to play the video - I just don't want the default video player and play button to show).
A simplified, easy to extend version.