how to lock ipad orientation in landscape for mobile webapps

Question

can anyone tel how to lock ipad orientation in landscape for mobile webapps. even if it flip it should not rotate into portrait.

     function reorient(e) {
        var portrait = (window.orientation % 180 != 0);
        $("body").css("-webkit-transform", !portrait ? "rotate(90deg)" : "");
        alert("hi");
      } 
       window.onorientationchange = reorient;
       window.setTimeout(reorient, 0)

i tried these code but it affecting only the design . where as in my case it should flip

Answer 1

You could control the CSS in both orientations with a media query

media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)

Lèse majesté wrote a good answer to this question here which involves countering the rotation with jquery: Blocking device rotation on mobile web pages

$(window).bind('orientationchange resize', function(event){
  if(event.orientation) {
    if (event.orientation == 'landscape') {
      if (window.rotation == 90) {
        rotate(this, -90);
      } else {
        rotate(this, 90);
      }
    }
  });

function rotate(el, degs) {
  iedegs = degs/90;
  if (iedegs < 0) iedegs += 4);
  transform = 'rotate('+degs+'deg)';
  iefilter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+iedegs+')';
  styles = {
    transform: transform,
    '-webkit-transform': transform,
    '-moz-transform': transform,
    '-o-transform': transform,
    filter: iefilter,
    '-ms-filter': iefilter
  };
  $(el).css(styles);
}