Orientation block


The support for orientation lock on mobile browsers is really bad, just a few provide it out of the box. The solution for the problem is, what I call a rotation block. An element which blocks the entire content once the orientation changes, which forces the user to use a certain orientation on the mobile device. Some HTML5 game engines already using this technique to lock the orientation.

 

CanIuse
Current support of orientation lock on mobile devices
from http://caniuse.com/

 

how it works

We are using the orientation change event, which is fired once the device change orientation either +90 or -90 degrees. The window.orientation property returns the current orientation of the screen. With this two functions we are able to detect orientation change and detect the new orientation.
If the detected orientation is not the desired one the rotation block div will cover the content, and force the user to change the orientation.

 

Make sure you are on a mobile device with

If on a mobile device, add a div as first child of the HTML body

These functions are responsible for detecting orientation change and check if orientation = desired orientation.

This is the basic concept to get orientation block working on any HTML5 app. But there is a lot more to it, you can animate elements on the orientation block div, add links or tooltips all via css. This makes the orientation block not just useful it can make it interactive and informative as well.

 

You should pause your application during the wrong orientation screen to avoid conflicts with the running app

rotationLock_animLandscape
Rotation block lock to landscape view

 

cocos2d-x implementation

Cocos2d-x only supports orientation lock as native app, not as web app. Simply add the script to a Cocos2d-x project and it will work right away. It will use the exact same technique as described above. With just a few simple adjustments to fit perfectly into Cocos2d-x.

 

conclusion

This might be the best solution to create a fake rotation lock on mobile devices. It’s very simply and highly customisable. It will increase user experience, and you have the chance to add additional content with an ease.