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:

            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 device checks to CSS

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 device checks to JavaScript

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 device check client-side.

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.