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.

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.
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i))
If on a mobile device, add a div as first child of the HTML body
//CREATE ROTATIONBLOCK DIV
var rotationBlock = document.createElement("div");
rotationBlock.id = "rotationBlock";
rotationBlock.style.position = "absolute";
// rotationBlock.style.backgroundColor = "#D93600"; //JUST A BACKGROUND COLOR
rotationBlock.style.backgroundImage = "url('oil to your image')"; //BLOCKER IMAGE
rotationBlock.style.backgroundSize = "cover"; //COVER FULL DIV WITH IMAGE
rotationBlock.style.backgroundPosition = "center center"; //CENTER BG
rotationBlock.style.position = "absolute"
rotationBlock.style.zIndex = 100; //RENDER ON TOP
rotationBlock.style.width = "100%"
rotationBlock.style.height = "100%"
//ADD ROTATIONBLOCK AS FIRST ELEMENT
document.body.insertBefore(rotationBlock,document.body.firstChild)
These functions are responsible for detecting orientation change and check if orientation = desired orientation.
var orientation = "portrait" //DESIRED ORIENTATION
window.addEventListener("orientationchange", setRotationBlock);
function setRotationBlock()
{
if( getOrientation() == orientation)
{
//CORRECT ORIENTATION
rotationBlock.style.display = "none";
}
else
{
//WRONG ORIENTATION
rotationBlock.style.display = "block";
}
}
function getOrientation()
{
switch (window.orientation)
{
case 0:return "portrait";
case 180:return "portrait";
case 90:return "landscape";
case -90:return "landscape";
}
}
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

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.
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.
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.