Device Detection

Detecting the device characteristics

The device detection feature of CFML allows you to identify the device properties and characteristics, which can be used to determine the best content, layout, mark-up or application to serve to the given device.

These characteristics include screen size, browser type and version, media support, and the level of support for CSS, HTML, and JavaScript.

For getting the device features and capabilities, you need to specify an attribute detectDevice in the <cfclientsettings> tag and set it to true:

If the detectDevice attribute is set to true, ColdFusion automatically detects the features and capabilities of the device (width, height, and orientation) on which the application is running.

Note: If detectDevice is set to false, all <div> elements need to be defined before the <cfclient> block.

Supported device detection features

The following example shows the usage of the device detection feature:

<cfClientSettings detectDevice=true />

<cfclient>

<cffunction access="public" name="showcanvassupport" returntype="void" >
<cfset document.getElementById('canvas').innerHTML=cfclient.properties.canvas>

</cffunction>

</cfclient>

Canvas support - 
<button onclick="invokeCFClientFunction('showcanvassupport',null)">
Show canvas support
</button>

In the above example, we are trying to find if the device supports HTML5 Canvas. cfclient.properties.canvas returns a boolean value indicating the support for the HTML5 Canvas property.

ColdFusion Server internally uses Modernizer JavaScript library (version 2.6.2) for the device detection feature.

The following table lists the supported device features with example usage:

Features	Syntax
Touch Events	cfclient.properties.touch
Canvas Text	cfclient.properties.canvastext
Canvas	cfclient.properties.canvas
Geolocation	cfclient.properties.geolocation
Web Sockets	cfclient.properties.websockets
Drag ‘n Drop	cfclient.properties.draganddrop
History	cfclient.properties.history
applicationCache	cfclient.properties.applicationcache
localStorage	cfclient.properties.localstorage
Width	cfclient.properties.width
Height	cfclient.properties.height
Device Width	cfclient.properties.deviceWidth
Device Height	cfclient.properties.deviceHeight
Orientation	cfclient.properties.orientation
Device Group Name	cfclient.properties.deviceGroupName
Device Group Descriptions	cfclient.properties.deviceGroupDescription
CSS Animations	cfclient.properties.cssanimations
CSS Columns	cfclient.properties.csscolumns
CSS Generated Content	Cfclient.properties.generatedcontent
CSS Gradients	cfclient.properties.cssgradients
CSS Reflections	cfclient.properties.cssreflections
CSS 2D Transforms	cfclient.properties.csstransforms
CSS 3D Transforms	cfclient.properties.csstransforms3d
CSS Transitions	cfclient.properties.csstransitions
Audio	cfclient.properties.audio
Video	cfclient.properties.video
Hash Change	cfclient.properties.hashchange
IndexedDB	cfclient.properties.indexeddb
Input Attributes	cfclient.properties.input.* (* refers to attributes for input elements. For possible values, see the Modernizr documentation)
Input Types	cfclient.properties.inputtypes.* (* refers to input type attributes. For possible values, see the Modernizr documentation)
Post Message	cfclient.properties.postmessage
Session Storage	cfclient.properties.sessionstorage
Web Workers	cfclient.properties.webworkers
Web SQL Database	cfclient.properties.websqldatabase

For the description on all above mentioned features, see the Modernizr documentation.

Using media queries

Media queries allow you to apply changes to the page design based on the viewing size and capability of the device on which your content is displayed. A media query consists of one or more logical expressions formed using the detected device data that checks for certain conditions of media feature and based on the result of this expression we can change the layout of the page dynamically.

If you are building a mobile application, you can easily detect the characteristics of the device and customize the layout just for that device as shown in the following example:

In the above example, the web page is customized for different devices based on their screen sizes.

Handling orientation changes

For handling the device orientation changes, you can register a listener using the addOrientationListener() function:

<cfclientsettings detectDevice=true />
<cfclient>
<cfoutput>
Orientation : 
Width : 
Height : 
</cfoutput>


<cfset cfclient.addOrientationListener(orientationHandler)>

<cffunction access="public" name="orientationHandler"
returntype="void" >
<cfargument name="orientationString" type="string">

</cffunction>
</cfclient>

In the above example, addOrientationListener function is used to register a listener that monitors the orientation of the device (landscape or portrait). When the orientation of the device changes, an orientationHandler call back function is invoked.

You can use the removeOrientationListener to un-register the listener:

You can also add multiple listeners:

When the device orientation changes, all the registered listener functions are invoked.

Handling window resizing events

For handling the window resizing events, you can register a listener using the addResizeListener() function:

<cfclientsettings detectDevice=true />
<cfclient>
<cfoutput>
Width : 
Height : 
Device width : 
Device height : 
</cfoutput>


<cfset cfclient.addResizeListener(resizehandler)>

<cffunction access="public" name="resizehandler"
returntype="void" >
<cfargument name="width" type="string">
<cfargument name="height" type="string">
<cfset document.getElementById('width').innerHTML=width>
<cfset document.getElementById('height').innerHTML=height>
<cfset document.getElementById('devicewidth').innerHTML=cfclient.properties.deviceWidth>
<cfset document.getElementById('deviceheight').innerHTML=cfclient.properties.deviceHeight>
</cffunction>
</cfclient>

You can also add multiple listeners:

When there is a change in window size all the registered resize listener functions are invoked. You can use removeResizeListener() to un-register the handlers.

Setting device timeout

In the <cfclientsettings> tag, an attribute called deviceTimeOut can be specified. The default value of deviceTimeout is 10 secs. When enableDeviceApi or detectDevice is set as true, the deviceTimeOut value will be honored. Time will be provided for the required plugins to be loaded. After the specified time, an exception will be thrown.