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.|
|Build Mobile Websites and Apps for Smart Devices provides practical, up to date information on all aspects of Mobile Web Development.|