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?

Damaraland

another way is "CSS3 Media Queries" try and google it and understand it abit more it really is something that the mobile web and you can do what you wont without any libraries :) – Rechaba

Yes I'm quite aware of media queries and have used them in the past but media queries detect screen sizes, not necessarily devices/browsers. And I'm looking to specifically target mobile webkit. – Damaraland

developer.apple.com/internet/webcontent/objectdetection.html would this be of any interest ? – Rechaba

No because if I wanted to feature-test I could just use modernizr for that (and I already do) but feature-testing will only get you so far if we're talking about using alternative javascript libraries. What amount of features should I test to determine I'm still on a mobile webkit browser and use zepto.js? Especially when you consider that desktop browsers on mac are becoming more and more touch-capable. – Damaraland

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.

Damaraland

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);
});

Bauman