HTML5 Orientation support (iPhone)

There is a great tutorial on html5rocks.com on how to use device orientation api in javascript. It has neat examples to demonstrate the functionality.

Problems with browser Orientation change:

But one issue that I faced is when the device(iPhone) is tilted, the browser’s orientation gets changed between landscape and portrait, which had a very negative impact on my project. I am currently working on a game named ‘HTML5 Space Maze'(in github), which is supposed to draw a continuous line based on device orientation. But when the device is tilted and the browser’s orientation gets changed, my game’s state gets messed up.Searched with a hope that there should be some API to lock the browser orientation. But there were none, though I got some work arounds(in stackoverflow) to┬ámimic┬áthe orientation lock. But I am not satisfied with all this and postponed my R & D.

Phonegap, the savior:

Today morning I was trying out the phonegap framework for first time and my HTML5 Space Maze game integrated well with the phonegap and ran good in iPhone. Then I switched to the long-forgotten ‘orientation’ branch of my project and tried running the code through phonegap, locking the orientation of ‘CDVViewController’ to landscape left.Then tested the code in iPhone and it worked flawlessly. Since the ViewController is restricted to landscape left, no matter how you tilt the phone, the views wont rotate and thus making my game responding well.

I achieved my goal somehow today, but the target platform changed from web to iOS now. Not a big deal for me, I not yet decided or even thought on how and where to deploy the product once its complete.