Possible Duplicate:
How do I lock the orientation to portrait mode in a iPhone Web Application?
我正在努力锁定网络应用程序的方向。例如，希望站点永久处于方向 View 中。
感谢建议。
最佳答案
我创建了函数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);
}
这是一个较小的版本:
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);
}
然后，如果您编写 keep(90); (代码中的任何位置)，当您转动 iPod 时，屏幕将保持横向(左)。
P.S:它仅在全屏 View 中有效(当应用程序保存到主屏幕时)。
关于javascript - iPhone iPad iPod 网络应用程序的锁定方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3667847/