How to test for mobile webkit

Question

I'm looking to build a new website and want to take a responsible "mobile-first" approach. One tenet of this methodology is to only load what you need, and to avoid including large wasteful libraries and frameworks until you actually need them.

For this I intend to use modernizr2 to test for features and then load only required files and libraries.

On the javascript side, I'm really interested in using something like zepto.js (http://zeptojs.com/) which is a tiny javascript library (2-5k) optimized for mobile webkit (and mobile webkit alone) while maintaining a jquery compatible syntax. It's also been designed to be "hot-swappable" with full-on jquery. So my strategy is (in pseudo-code):

• Test for mobile webkit
• If(true) load zepto.js
• if(false) load jquery

But now my question is: what (future proof) technique would you guys recommend for detecting mobile webkit, preferably in a pure javascript way (without using jquery, plugins or other libraries) and that could be integrated with modernizr's testing API?

Answer 1

Okay, so I guess my question was poorly worded or something, but a little digging around and I've found an acceptable solution that works with my use-case.

// Webkit detection script
Modernizr.addTest('webkit', function(){
return RegExp(" AppleWebKit/").test(navigator.userAgent);
});

// Mobile Webkit
Modernizr.addTest('mobile', function(){
return RegExp(" Mobile/").test(navigator.userAgent);
});

These two tests will add both the 'webkit' and 'mobile' classes to your html tag (or 'no-webkit' and 'no-mobile' if false) but will also allow you to conditionally load your preferred javascript library, depending on the situation.

In my case either toggling between JQuery or Zepto.js:

Modernizr.load([
            // test mobile webkit (zepto or jquery?)
            {
                test: Modernizr.webkit && Modernizr.mobile,
                nope: ['//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'],
                yep: [baseURL + 'js/lib/zepto.min.js']
            }]);

So when I detect a visitor is using a mobile-webkit browser (which is probably like 100% of iOS or Android devices out there), I can save them a considerable amount of overhead, and load regular JQuery for everyone else, if necessary. Since the syntax is so similar, plugins and other scripts will likely still work regardless of which framework ends up being loaded.

Answer 2

gillesv's answer is almost spot-on. However, I found that the Regex does not detect Webkit browsers on Android 2.2 & 2.3 (Froyo & Gingerbread). The userAgent does contain both the phrases 'AppleWebkit' and 'Mobile' but not with a forward slash at the end.

Modifying the code as follows works for me:

// Webkit detection script
Modernizr.addTest('webkit', function(){
  return RegExp(" AppleWebKit").test(navigator.userAgent);
});

// Mobile Webkit
Modernizr.addTest('mobile', function(){
  return RegExp(" Mobile").test(navigator.userAgent);
});