Lock orientation of webapp for iPhone iPad iPod

Question

Possible Duplicate:
How do I lock the orientation to portrait mode in a iPhone Web Application?

Im struggling to lock orientation of a webapp. For example want the site to be permanently in orientation view.

And advice appreciated.

Yup, I think this has already been covered here, too: http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application — Justin Russell, Sep 08 '10 at 13:33

Alexandre Khoury · Answer 1 · 2012-12-20T20:17:17.487

I have made the function keep that takes as parameter the orientation you want to keep (90/180/-90/0) :

function keep(nbre)
{
    var preventer,deviceW=screen.width,deviceH=screen.height;
    function set()//I put all the content of the body in a container named 'preventer' so that I can turn it (I can't turn the <body>)
    {
        var body=document.getElementsByTagName("body")[0];
        preventer=document.createElement("div");
        preventer.innerHTML=body.innerHTML;
        preventer.style.position="absolute";
        body.innerHTML="";
        modify();
        document.body.appendChild(preventer);
    }
    function modify()
    {
        function sign(x,y){return(x>0?1:(x<0?-1:y));}//Return the sign or y if 0
        window.scrollTo(0,0);
        var o=window.orientation,width,height,transformorigin,transform="rotate(",top,left;
        if(!(nbre%180))//Multiple of 180 : 180, 360...
        {
            if(!(o%180))//Also multiple of 180
            {
                width=deviceW;//Width and height ar those of the device
                height=deviceH-20;//-20 because of the status bar
            }
            else
            {
                width=deviceW-20;
                height=deviceH;
            }
        }
        else
        {
            if(!(o%180))
            {
                width=deviceH-20;
                heigth=deviceW;
            }
            else
            {
                width=deviceH;
                height=deviceW-20;
            }
        }
        if(Math.abs(nbre%180)==Math.abs(o%180))//If it's 90 and 90 or 90 and -90 or 180 and 180...
        {
            transformorigin="50% 50%";//The origin of rotation must be the center of the div
        }
        else
        {
            transformorigin="0px 0px";
        }

        if(!nbre)//0
        {
            if(!(o%180))//180, 360...
            {
                transform=o;
            }
            else
            {
                transform=-o;
            }
        }
        else
        {
            if(nbre==90)
            {
                transform=o-(o*2-90);//0=>90 90=>0 180=>-90 -90=>180
            }
            else
            {
                if(nbre==-90)
                {
                    if(sign(o,-1)==-1)
                    {
                        transform=o-sign(o,1)*90;
                    }
                    else
                    {
                        transform=o-180+sign(o-180,1)*90;
                    }
                }
                else
                {
                    if(!(o%180))
                    {
                        transform=o-sign(o,-1)*180;
                    }
                    else
                    {
                        transform=o;
                    }
                }
            }
        }
        transform+="deg)";

        if(Math.abs(nbre)%180==Math.abs(o)%180)
        {
            top=0;
            left=0;
        }
        else
        {
            if(nbre==0&&o==90||nbre==180&&o==-90)
            {
                top=deviceW-20;
                left=0;
            }
            else
            {
                if(nbre==0&&o==-90||nbre==180&&o==90)
                {
                    top=0;
                    left=deviceH;
                }
                else
                {
                    if(nbre==-90&&o==0||nbre==90&&o==180)
                    {
                        top=deviceH-20;
                        left=0;
                    }
                    else
                    {
                        top=0;
                        left=deviceW;
                    }
                }
            }
        }
        preventer.style.webkitTransform=transform;
        preventer.style.webkitTransformOrigin=transformorigin;
        preventer.style.width=width+"px";
        preventer.style.height=height+"px";
        preventer.style.top=top+"px";
        preventer.style.left=left+"px";
    }
    window.addEventListener("orientationchange",modify,false);
    window.addEventListener("load",set,false);
}

Here is a smaller version:

function keep(nbre)
{
    var preventer,deviceW=screen.width,deviceH=screen.height;
    function set()
    {
        var body=document.getElementsByTagName("body")[0];
        preventer=document.createElement("div");
        preventer.innerHTML=body.innerHTML;
        preventer.style.position="absolute";
        body.innerHTML="";
        modify();
        document.body.appendChild(preventer);
    }
    function modify()
    {
        function sign(x,y){return(x>0?1:(x<0?-1:y));}
        window.scrollTo(0,0);
        var o=window.orientation,s=!(nbre%180)?(!(o%180)?[deviceW,deviceH-20]:[deviceW-20,deviceH]):(!(o%180)?[deviceH-20,deviceW]:[deviceH,deviceW-20]),t=[Math.abs(nbre%180)==Math.abs(o%180)?"50% 50%":"0px 0px","rotate("+(!nbre?(!(o%180)?o:-o):((nbre==90)?o-(o*2-90):((nbre==-90)?(sign(o,-1)==-1?o-sign(o,1)*90:o-180+sign(o-180,1)*90):(!(o%180)?o-sign(o,-1)*180:o))))+"deg)"],p=Math.abs(nbre)%180==Math.abs(o)%180?[0,0]:(nbre==0&&o==90||nbre==180&&o==-90?[deviceW-20,0]:(nbre==0&&o==-90||nbre==180&&o==90?[0,deviceH]:(nbre==-90&&o==0||nbre==90&&o==180?[deviceH-20,0]:[0,deviceW])));
        preventer.style.webkitTransform=t[1];
        preventer.style.webkitTransformOrigin=t[0];
        preventer.style.width=s[0]+"px";
        preventer.style.height=s[1]+"px";
        preventer.style.top=p[0]+"px";
        preventer.style.left=p[1]+"px";
    }
    window.addEventListener("orientationchange",modify,false);
    window.addEventListener("load",set,false);
}

Then if you write keep(90); (anywhere in the code), when you will turn the iPod, the screen will keep at Landscape(left).

P.S: It works only in full screen view (when the app is saved to home screen).

is there a way to make more clear this part? `var o=window.orientation,s=!(nbre%180)? ...#506 more chars#... [deviceH-20,0]:[0,deviceW])));` — superjos, Dec 20 '12 at 18:15
I added an explained version. And the weird way of putting a big else is because I transformed this to the `a?b:c` form which is organized like that. If you don't understand a line ask me. — Alexandre Khoury, Dec 20 '12 at 20:19

score -1 · Answer 2 · answered Sep 08 '10 at 14:32

Use this method of UIViewController - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation and test if the interfaceOrientation is equal to UIInterfaceOrientation you want, in this case return YES else NO.

typedef enum {
   UIInterfaceOrientationPortrait           = UIDeviceOrientationPortrait,
   UIInterfaceOrientationPortraitUpsideDown = UIDeviceOrientationPortraitUpsideDown,
   UIInterfaceOrientationLandscapeLeft      = UIDeviceOrientationLandscapeRight,
   UIInterfaceOrientationLandscapeRight     = UIDeviceOrientationLandscapeLeft
} UIInterfaceOrientation;

The question seems to be webapp specific so native code isn't an option — donohoe, Oct 12 '10 at 14:47

Lock orientation of webapp for iPhone iPad iPod

2 Answers2