Device Classification in the UCLA Mobile Web Framework
UPDATE: The device classifications covered in this article are now fully documented. As the UCLA Mobile Web Framework is rapidly evolving, you’re better off getting the information straight from the source.
While these categories are not fully documented yet, we can peek at the source code and see how the framework classifies each device:
A standard device supports:
A full device supports all of the things a standard device supports and:
- CSS3 border radius
- CSS3 box shadow
- CSS3 gradients
Beyond these three categories, the framework also uses two additional categories: iPhone and preview. If the framework determines a device is an iPhone, then two additional scripts are loaded: one for hiding the Safari address bar and another for resizing the page on orientation.
Finally, if the User is in preview mode, the device loads additional scripts for displaying a preview menu that allows the User to manually switch among these device categories.
How It Works
If you’re wondering how all of this device detection works, it’s a pretty clever little process:
- User visits a page generated by the UCLA MWF
- Framework determines that a device information cookie has not been set
- Framework JS library detects the device’s capabilities (using Modernizr), and determines the device category
- Framework JS library stores this information in a cookie and reloads the page
- Server-side framework library pulls the information from the cookie and uses it to serve dynamic JS and CSS
Let’s wrap up all of this up with a quick example. Let’s say you have the following:
In this example, the geolocation library will only load up for standard and full devices, while the external script (
main.js) will only load for full devices.