Posted on by & filed under Content - Highlights and Reviews, Web Development.

The State of HTML5 Mobile in 2012 post introduced some of the trends in mobile HTML5 development for 2012. In this post we will look at several ways of detecting mobile device movement using HTML5.

In order to programatically detect movement on your mobile device, you must access the DeviceOrientation event specification. This spec defines three events for handling physical orientation and movement changes in a mobile device. This essentially grants developers access to the accelerometer, gyroscope and compass in the device, enabling the development of applications and games that allow the user to control the app by moving the device rather than touching elements on the screen.


This event fires whenever a significant change in orientation occurs. It uses compass and gyroscope sensors to detect the direction and rotation of the device. Don’t confuse this event with HTML5’s orientationchange event, which merely checks if the device is in portrait or landscape mode. The deviceorientation event returns much more detailed information.


This event fires whenever the device is moved, and in addition to the rotation and direction data returned by the deviceorientation event, it also returns acceleration data made available by an accelerometer sensor in the device.


If the device includes a compass, this sensor may need calibration in order to produce accurate results. This event is fired whenever the compass needs to be calibrated. By default, developers should not need to worry about this event, as browser vendors should provide information to the user about how to calibrate the compass. If desired, the developer can cancel the default event action and provide custom guidelines instead.

Safari Books Online has the content you need

The following HTML5 titles in Safari Books Online will help get you started creating mobile HTML5 apps.

HTML5 Developer’s Cookbook provides all the expert advice and proven code you need to start building production-quality HTML5 applications right now.
Pro Android Web Apps: Develop for Android Using HTML5, CSS3 & JavaScript will help you develop HTML5 mobile Web applications.
Build Mobile Websites and Apps for Smart Devices provides practical, up to date information on all aspects of Mobile Web Development.

About the author

  Joe Lennon is a Web and Mobile applications developer from Cork, Ireland. He works as Product Manager of Mobile Solutions for Core International, one of the UK and Ireland’s leading enterprise HR software vendors. Joe is the author of Beginning CouchDB, and is co-author of the forthcoming title HTML5 in Action. He is also a regular contributor to the IBM developerWorks library. You can learn more about Joe and his work on his website at .

Tags: DeviceOrientation, html5, mobile,

One Response to “Detecting Movement in HTML5”

  1. Stephen Greig

    Obviously this deviceorientation event is going to be put into great, creative use for movement-based games… the thing that intrigues me is whether us Web Developers could put this technology to use; this could lead to some reeeally cutting edge, experimental techniques making their way into your every day mobile-device website.

    I think we perhaps underestimate the effect of new technologies on something as simple as a website. The next few years are going to be an exciting time of transition for sure.