Device Detection with WURFL.js

Need a Commercial License?

WURFL.js Business Edition offers a commercial license that also includes:

• more capabilities • custom domains and SSL certificates • SLA • priority support • and more

Learn more about WURFL.js Business Edition

WURFL.js is a JavaScript file that provides information about the device that is accesing your page. Whether it is a desktop browser, a tablet, a mobile phone, a smart TV, game console or someone with his wristwatch.

Those familiar with WURFL will recognize the venerable Server-Side Device Detection solution, but, at the same time, they will be pleased to discover that there is no need to mess with PHP, Java or .NET code this time. All you need to do is adding the following script to your page

<script type="text/javascript" src="//"></script>

You can use this information to fine-tune the user experience with Javascript. In fact, this very page is using WURFL.js and the UX is being optimized depending on what web enabled device you are using to visit it.

In particular:

  • Desktop devices get at fancy video background on the top of the page
  • Mobile devices get a background image.
  • Paralax scrolling is disabled for mobile devices.
  • Navigation is optimized to your device`s form factor.
  • You get different ads based on your device`s capabilities.
  • Google Analytics is collecting information about the device through custom variables.

Doing a "view source" on this page will reveal how this works, or simply jump to the Getting Started section


Based on information WURFL.js provides, such as a device make and model, form factor and whether it is mobile or not, you can create a personalized experience for your users. You can even use it to increase speed and performance for your mobile users, just as we did on this demo page.


Designing a great user experience starts with knowing your users. WURFL.js provide information that is not available elsewhere. This information can be put into analytics tools such as Google Analytics and be the basis for custom reports that are more accurate than the standard ones.


If you monetize your site or blog though advertising, you may be relying on multiple ad networks. Some networks are better at targeting mobile traffic, while others do a better job with regular desktop web traffic. WURFL.js helps you decide which one is better for each user. This may increase your CTR.

Getting Started

First, include the script in your markup (https is suported):

<script type="text/javascript" src="//"></script>

...and start JavaScripting:


You can for example use the object to check if it is a mobile device like this:


View source on this page to see more examples on how to use WURFL.js.

For this particular browser/device, the WURFL object looks like this:

Below are the capabilities and values you can make use of.

The name the device is known by. Typically make and model, a "group" of devices, or a more generic definition.
Feature Phone
Other non-Mobile
Other Mobile
true or false. True if the device is a tablet, or other mobile device.

Further, you can control caching by adding this parameter to the query string.

Any cache is switched off. Useful while developing

Optimize with ImageEngine Lite

WURFL Image Tailor (WIT) is now ImageEngine Lite!

ImageEngine Lite is an automatic image optimizer based on WURFL device detection. WURFL will detect the device capabilities, including screen size and image format support, resize and optimize the image accordingly. That's why we call it the ImageEngine.

ImageEngine Lite is not only for mobile. ImageEngine Lite supports the emerging Client Hint standard making it the perfect companion for Responsive Images.

Images weight is by far the most important challenge to address to optimize a web page for the plethora of devices on the web today. This is why ImageEngine Lite will instantly give your users a better experience by reducing load time of your page. Not to mention the reduced data cost.

ImageEngine Lite works as a CDN proxy. By referencing the ImageEngine Lite servers and providing the full URL to the original image as a parameter, ImageEngine Lite will identify the device, and its capabilities, and resize and optimize the image accordingly.

ImageEngine Lite is available at no charge. You get 5GB of monthly traffic and each source image can be up to 2MB. If you need more, you can get it here.

Getting started

To use ImageEngine Lite you need to register an account: (For free!) Register account

When you have signed up, you get a unique token. This token is used to indentify you account and is the first part of the host name: [your-key]

Then you are set! To start using ImageEngine Lite, the only thing required is to prefix your image URL with your URL (including your personal key) to the ImageEngine Lite service

<img src="//[your-key][full-url-to-your-image]">
For example:
<img src="//[your-key]">

The above example is the simplest possible use case. The size of the image will be equal to the detected screen size of the requesting device.

However, you can be more specific. ImageEngine Lite take the parameters listed below. The parameters are added to the url. The below example would return an image sized to 50% of the screen width.

<img src="//[your-key]">

Full list of parameters:

Desired width of resized picture. .../w_200/... would resize the image to 200 pixels wide.
Desired height of resized picture. .../h_200/... would resize the image to 200 pixels tall.
This field will use WURFL to calculate the screen width and then scale the image accordingly. .../pc_20/... would resize the image to 20% of the screen width of the requesting device.
This setting determines how the engine will resize the images. Legal values are box, stretch, letterbox, cropbox. .../w_100/h_200/m_box/... would fit the box defined with w and h parameters.
The image is scaled to fit within the specified dimensions. Note that the image that is returned will not necessarily be the same size as the requested dimensions, but it will fit inside a box of those dimensions.
This method is default if only ONE dimension is specified (either width, height, or percentage) without an explicit fit mode setting.
The cropbox method will resample the image as small as possible while showing no canvas. This will result in some cropping if the source and output aspect ratios differ.
Same as box, except the returned image is exactly the size specified. bars of white are placed around the image if necessary, but the image will not be scaled up. To use a color other than white, you can specify the HEX color code after the letterbox directive, like this for red: /m_letterbox_ff0000/. The canvas opacity can also be specified for images that support transparency. This is would be specified as a third parameter of m: /m_letterbox_ff0000_65/.
The stretch method will resample the image to fit the specified size by distorting the source image.
This method is default if BOTH with and height are specified without an explicit fit mode setting.
Desired format of picture (jpg, gif, png, bmp, webp). If no format is provided, the format of the original picture is used.

Full support for Client Hints, too.

ImageEngine Lite supports the emerging standard Client Hints. To enable this feature, include the below meta tag in your head element:

<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">


Did we mention it's free?

You can use the service free of charge, as long as your website is publicly available and does not require fees or paid subscription to access. Read the complete license here.

Oh, you don't need to register either. Just copy, paste and go!

What about support?

For WURFL.js, you can use the WURFL.js forum at the ScientiaMobile Support Portal if you have questions or need support.

Similarly, there is a dedicated forum for ImageEngine Lite.