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.

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.