User Guide Cancel

Device detection

Search
ColdFusion

ColdFusion

Open app
  1. ColdFusion Developers Guide
  2. Develop ColdFusion applications
    1. Introducing ColdFusion
      1. Introducing ColdFusion
      2. About ColdFusion
      3. About Internet applications and web application servers
      4. About JEE and the ColdFusion architecture
    2. Changes in ColdFusion
      1. Changes in ColdFusion
      2. Replacement of JRun with Tomcat
      3. Security enhancements
      4. ColdFusion WebSocket
      5. Enhanced Java integration
      6. ColdFusion ORM search for indexing and search
      7. Solr enhancements
      8. Scheduler enhancements
      9. Integration with Microsoft Exchange Server 2010
      10. RESTful Web Services in ColdFusion
      11. Lazy loading across client and server in ColdFusion
      12. Web service enhancements
      13. Displaying geolocation
      14. Client-side charting
      15. Caching enhancements
      16. Server update using ColdFusion Administrator
      17. Secure Profile for ColdFusion Administrator
    3. Introduction to application development
      1. Introduction to application development using ColdFusion
      2. Using the Developing ColdFusion Applications guide
      3. About Adobe ColdFusion documentation for Developers
    4. The CFML programming language
      1. The CFML programming language
      2. Elements of CFML
      3. ColdFusion variables
      4. Expressions and number signs
      5. Arrays and structures
      6. Extend ColdFusion pages with CFML scripting
      7. Regular expressions in functions
      8. ColdFusion language enhancements
      9. Built-in functions as first class citizen
      10. Data types- Developing guide
    5. Building blocks of ColdFusion applications
      1. Building blocks of ColdFusion applications
      2. Create ColdFusion elements
      3. Write and call user-defined functions
      4. Build and use ColdFusion Components
      5. Create and use custom CFML tags
      6. Build custom CFXAPI tags
      7. Use the member functions
      8. Object Oriented Programming in ColdFusion
    6. Develop CFML applications
      1. Develop CFML applications
      2. Design and optimize a ColdFusion application
      3. Handle errors
      4. Use persistent data and locking
      5. Use ColdFusion threads
      6. Secure applications
      7. Client-side CFML (for mobile development)
      8. Use the ColdFusion debugger
      9. Debugging and Troubleshooting Applications
      10. Develop globalized applications
      11. REST enhancements in ColdFusion
      12. Authentication through OAuth
      13. Social enhancements
    7. Develop mobile applications
      1. Mobile application development
      2. Build mobile applications
      3. Debug mobile applications
      4. Inspect mobile applications
      5. Package mobile applications
      6. Troubleshoot mobile applications
      7. Device detection
      8. Client-side CFML
      9. Mobile Templates
      10. Code samples to build a mobile application
    8. Access and use data
      1. Access and use data
      2. Introduction to Databases and SQL
      3. Access and retrieve data
      4. Update database
      5. Use Query of Queries
      6. Manage LDAP directories
      7. Solr search support
    9. ColdFusion ORM
      1. ColdFusion ORM
      2. Introducing ColdFusion ORM
      3. ORM architecture
      4. Configure ORM
      5. Define ORM mapping
      6. Work with objects
      7. ORM session management
      8. Transaction and concurrency
      9. Use HQL queries
      10. Autogenerate database schema
      11. Support for multiple data sources for ORM
      12. ColdFusion ORM search
    10. ColdFusion and HTML5
      1. ColdFusion and HTML 5
      2. Use ColdFusion Web Sockets
      3. Media Player enhancements
      4. Client-side charting
      5. Display geolocation data
    11. Flex and AIR integration in ColdFusion
      1. Flex and AIR integration in ColdFusion
      2. Use the Flash Remoting Service
      3. Use Flash Remoting Update
      4. Offline AIR application support
      5. Proxy ActionScript classes for ColdFusion services
      6. Use LiveCycle Data Services ES assembler
      7. Use server-side ActionScript
    12. Request and present information
      1. Request and present information
      2. Retrieve and format data
      3. Build dynamic forms with cfform tags
      4. Validate data
      5. Create forms in Flash
      6. Create skinnable XML forms
      7. Use Ajax data and development features
      8. Use Ajax User Interface components and features
    13. Office file interoperability
      1. Office file interoperability
      2. Using cfdocument
      3. Using cfpresentation
      4. Using cfspreadsheet
      5. Supported Office conversion formats
      6. SharePoint integration
    14. ColdFusion portlets
      1. ColdFusion portlets
      2. Run a ColdFusion portlet on a JBoss portal server
      3. Run a ColdFusion portlet on a WebSphere portal server
      4. Common methods used in portlet.cfc
      5. ColdFusion portlet components
      6. Support for JSR-286
    15. Work with documents, charts, and reports
      1. Work with documents, charts, and reports
      2. Manipulate PDF forms in ColdFusion
      3. Assemble PDF documents
      4. Create and manipulate ColdFusion images
      5. Create charts and graphs
        1. About charts
        2. Creating a basic chart
        3. Charting data
        4. Controlling chart appearance
        5. Creating charts: examples
        6. Administering charts
        7. Writing a chart to a variable
        8. Linking charts to URLs
        9. Charting enhancements
      6. Create reports and documents for printing
      7. Create reports with Report Builder
        1. About Report Builder
        2. Common reporting tasks and techniques
        3. Creating a simple report
        4. Getting started
      8. Create slide presentations
    16. Use web elements and external objects
      1. Use web elements and external objects
      2. Use XML and WDDX
      3. Use web services
      4. Use ColdFusion web services
      5. Integrate JEE and Java elements in CFML applications
      6. Use Microsoft .NET assemblies
      7. Integrate COM and CORBA objects in CFML applications
    17. Use external resources
      1. Send and receive e-mail
      2. Interact with Microsoft Exchange servers
      3. Interact with remote servers
      4. Manage files on the server
      5. Use event gateways
      6. Create custom event gateways
      7. Use the ColdFusion extensions for Eclipse
      8. Use the data services messaging event gateway
      9. Use the data management event gateway
      10. Use the FMS event gateway
      11. Use the instant messaging event gateways
      12. Use the SMS event gateway

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:

<cfclientsettings detectDevice=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 -<b id="canvas"></b><br>
<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:

<cfclientsettings detectDevice=true />
<cfclient>
<cfif cfclient.properties.width lte 480 >
<cfinclude template=" phone.css ">

<cfelseif cfclient.properties.width gte 480 AND cfclient.properties.width lte
760>
<cfinclude template=" tablet.css ">

<cfelse>
<cfinclude template=" desktop.css ">

</cfif>
</cfclient>

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 : <b id="orientationId"></b><br>
Width : <b id="width"></b><br>
Height : <b id="height"></b><br>
</cfoutput>
<!--- Adding the orientation handler here. After adding
the handler, the handler will be invoked whenever there
is an orientation change. --->


<cfset cfclient.addOrientationListener(orientationHandler)>



<cffunction access="public" name="orientationHandler"
returntype="void" >
<cfargument name="orientationString" type="string">
<!--- The orientation (landscape/portrait) will be
passed as an argument to the handler. You can also get
the orientation value from cfclient. --->
</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:

<cffunction access="public" name="removeorientationhandler"
returntype="void" >
<cfset cfclient.removeOrientationListener(orientationhandler)>
</cffunction>

You can also add multiple listeners:

<cfset cfclient.addOrientationListener(orientationHandler1)>
<cfset cfclient.addOrientationListener(orientationHandler2)>

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 :<b id="width"></b><br>
Height :<b id="height"></b><br>
Device width :<b id="devicewidth"></b><br>
Device height :<b id="deviceheight"></b><br>
</cfoutput>
<!--- Adding the resize handler here.
After adding the handler, the handler will be
invoked whenever there is a browser
resize. --->


<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:

<cfset cfclient.addResizeListener(resizeHandler1)>
<cfset cfclient.addResizeListener(resizeHandler2)>

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.

<cffunction access="public" name="removeresizehandler"
returntype="void" >
<cfset cfclient.removeResizeListener(resizeHandler)>
</cffunction>

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.

<cfclientsettings detectDevice=true deviceTimeOut="30" />

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy