Building for Mobile with Device Orientation
Mozilla Firefox 3.5 and Firefox for Mobile 1.0 (Fennec) both have support for modifying a web applications look based on screen dimensions and current orientation. These abilities give web developers the power to build better web applications for mobile devices and the ability to optimize the browsing experience when screen space is constrained.
CSS Orientation Properties
Web applications look and feel is defined by a CSS file, so therefore the Firefox developers made it super easy to tie current orientation and screen dimensions into which CSS file to load.
For examaple: If the browser is in portrait mode, a single CSS media parameter will specify which styles to use:
@media all and (orientation: portrait) { ... }
In the same way, you can create a custom CSS stylesheet for users who are browsing with a screen size between 500 and 700 pixels:
@media screen and (min-width: 500px) and (max-width: 700px) { ... }
Orientation Events
Firefox 3.6 adds support for orientation events in JavaScript, so you can get current updates of how the user is holding their mobile device:
window.addEventListener("MozOrientation", handleOrientation, true);
Once you register the event handler, the handleOrientation function will receive an object specifying the x, y, and z value of the devices current position:
function handleOrientation(orientData) {
var x = orientData.x;
var y = orientData.y;
var z = orientData.z;
}
With those parameters and a game timer, you can probably build the Labyrinth game.
For those of your that are ready to start experimenting with this API right away, Mozilla Developer Center has the full Firefox orientation documentation.