jAgent

Version 1.0

Metadata

When executed, jAgent adds a list of classes to the <html> tag of the page. These classes represent the client's browser features, and every class corresponds to an specific feature. Below you can see an example of the <html> tag after executing jAgent:

<html class="webkit chrome chrome22 mac mac10 mac10_8 orientation_landscape">

As you can see, the above tag belongs to a page loaded in Chrome version 22 on a Mac OS X 10.8 (Mountain Lion), and the orientation of the browser is landscape (meaning the browser is wider than it's tall). We'll talk later a bit more about orientation.

Main tags

Here is the list with all the main tags created by jAgent. This list contains the base tags only. You'll see later how some these main tags will be combined with versions to create a new set of useful features.

Browser Engine: gecko, webkit
Browser: chrome, safari, msie, firefox, opera, konqueror, iron
Operating System: mac, windows, freebsd, linux
Mobile: mobile, ios, android, ipad, iphone, ipod, kindle, blackberry, playbook, j2me
Orientation: orientation_portrait, orientation_landscape
Additional Features: retina

Versioning

Browser and Operating System tags will also include their version number when available. This way you have even more control over your page for different versions of the same browser/OS. Below you can see some example tags generated by jAgent:

Microsoft Windows: windowsnt, windows2000, windowsxp, windowsvista, windows7, windows8
Apple Mac OS: mac10, mac10_8, mac10_7, …
iOS: ios6, ios5_1, …
Browsers: chrome22, firefox16, safari6_0, msie8, …

Orientation

The orientation attribute represents the screen orientation state of the device where the page was loaded. This value will be computed using the window.onorientationchange event, and will be changed accordingly every time the user turns the device. For non-mobile devices, this attribute is computed based on the width and height of the browser window. If width >= height then the browser is considered to be in landscape mode, while if width < height portrait will be returned.

Additional Features

Here are some other features that will be added as tags for your convenience:

retina: Present on devices with retina display. A device is considered to have retina display when window.devicePixelRatio === 2.

Methods

Another useful feature of jAgent is an interface with some JavaScript methods to help test the existence of the same features that we've seen so far. Below is the complete list of supported methods:

$.jagent.isMobile()
$.jagent.isIOS()
$.jagent.isAndroid()
$.jagent.isIPad()
$.jagent.isIPhone()
$.jagent.isIPod()
$.jagent.isKindle()
$.jagent.isBlackberry()
$.jagent.isPlaybook()
$.jagent.isJ2ME()
$.jagent.isRetina()
$.jagent.isPortrait()
$.jagent.isLandscape()
$.jagent.isChrome()
$.jagent.isFirefox()
$.jagent.isSafari()
$.jagent.isMSIE()

Example

Let's take a look to a very simple example of how to use jAgent.

Start by downloading the library. Make sure you reference it in your project along with the latest version of jQuery. The following code will do it for you:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.jagent.js" type="text/javascript"></script>

Add a <div> tag anywhere in your page:

<div class='sample'></div>

Now add the following CSS code to your styles:

.sample { width: 200px; height: 200px; }
.chrome .sample { background-color: Red; }
.firefox .sample { background-color: Green; }
.msie .sample { background-color: Blue; }
.msie8 .sample { background-color: Yellow; }

You can go ahead now and load the page in a browser. As you may imagine, the color of the <div> we added depends on the browser we are loading the page in. In Chrome the color will be red, meanwhile Internet Explorer will display it blue unless it's IE 8, which will display the <div> in yellow.

For a more complex example, download the example folder included in the project repository.

svpino/jagent