Widget Developer Documentation

Devices

This page discusses how you can target different devices (smartphones, tablets, etc.) from within your widget code.

The user has a visibility flag for each widget, which allows them to disable a widget on certain device classes. As a widget developer, you can respond to client device capabilities with much more subtlety. You can easily change the behavior, design, or even the output structure of your widget on different device classes. Read on.

Device-checking

The main coding tool you have available for device-checking is the API call Moboom::deviceHasProfile(). For example:

// when a script is not needed on feature phones:
//
if ( !Moboom::deviceHasProfile( 'Feature Phone')) {
    Moboom::registerScriptFile( $baseURL . 'bootstrap-collapse.js', Moboom::POS_END);
}

With this one API call, you can accomplish just about anything related to device handling.

Here is a list of some useful profiles you can check for in that API. The first four should suffice for most applications, but you may have a need for a more granular device test. Note that “Desktop” includes laptops; there is no way to differentiate. If you need to query for the presence of a feature like touch, use Modernizr, which is discussed below.

            Desktop | Mobile | Tablet | Feature Phone | Smartphone | iPhone | iPad
            iPod | iOS | Android | Android 2.3 | BlackBerry | Windows Phone

You can use device-checking to load different PHP files (using include), or JavaScript or CSS assets (using Moboom::registerCssFile() or Moboom::registerScriptFile()).

Tying CSS to device checks

If you have a widget that has significant differences in functionality across different devices, you should be able to accomplish most or all of what you need by using Moboom::deviceHasProfile(). That API allows you to selectively load different scripts or styles for different device types.

In addition, Moboom has a new (and patented) feature called server-side media queries (SSMQ). These queries are included in our LESS processing engine, and allow you to do device-checking in your media queries, in addition to the normal pixel-size queries that you’re used to.

@media(-mb-desktop) {}
@media(-mb-tablet) {}
@media(-mb-mobile) {}
@media(-mb-phone) {}

Tying JavaScript to device checks

Again, the Moboom::deviceHasProfile() API should be sufficient for most of your needs. However, there is a way to do media queries in JavaScript if you need to do a client-side device check in order to deploy different interactions on different devices.

Every site built with Moboom has access to Modernizr. Modernizr is a set of JavaScript device checks which allow you to determine if certain features are available on the client device. It’s the modern way to do what web developers used to do with user-agent strings. Instead of testing if the client is running IE8 before calling a JavaScript method, Modernizr allows you to see if the client supports a specific feature, like CSS transforms or drag-and-drop. See their documentation for more details.

Included with Modernizr is a special API to emulate CSS media queries in JavaScript. See their documentation page for more information on this API, which is Modernizer.mq(). The queries you can do with Modernizr are similar to the queries you can do with normal CSS3. In other words, you can do pixel-size queries, but not device-profile queries.

In some situations, you may want to do actual device checks (is this a mobile phone?), rather than feature checks (does this device support SVG?). If you need that level of device information, you may want to look into embedding WURFL.js in your widget code. More information can be found in this Smashing Magazine article.