javascript - iPhone iPad iPod 网络应用程序的锁定方向-6ren

javascript - iPhone iPad iPod 网络应用程序的锁定方向

转载作者：行者123 更新时间：2023-11-28 11:00:06

24

4

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/

24

4

0

文章推荐： jquery - IE 和调整 window.resize 上的 div

文章推荐： javascript - Bootstrap 模式用链接替换按钮 - 动态 Div ID

ipad - iPad 可以作为开发机来创建 iPad 应用程序吗？
我妻子有一台 iPad，我想知道我是否可以用它来开发 iPad 应用程序？我假设答案是否定的。最佳答案 Apple 的开发指南禁止商店中的此类应用程序，因此不幸的是，您不能使用 iPad 来制作 i
ipad - 如何在多台 iPad 上安装 iPad 应用程序？
我开发了一个 iPad 应用程序，并为应用程序商店制作了分发配置文件，我需要在 30 台 iPad 上安装我开发的应用程序以进行一次事件，但我无法安装。我收到错误消息:(应用程序“xxxx”未安装在
ipad - 在两个独立的 iPad 上测试 iPad 应用程序
我正在佛罗里达州开发一款 iPad/iPhone 应用程序，希望纽约的同事能帮我测试一下。纽约的测试人员没有 iMac，因为他们不在该地点进行任何开发。我只是想让他们验证他们所在位置的操作。有什么方法
ipad - iPad 对手指施加的压力敏感吗？
我可以检测用户(音乐家)手指施加的力或压力吗？最佳答案还没有。有一个技术演示展示了如何做到这一点。见 http://tenonedesign.com/blog/pressure-sensitiv
ipad - iPad 的屏幕尺寸减去浏览器中的地址栏是多少？
浏览器分辨率是多少？我已经在谷歌上搜索了一段时间，但不知何故我找不到它! 最佳答案 960x768 或 704x1024 关于ipad - iPad 的屏幕尺寸减去浏览器中的地址栏是多少？，我们在St
ipad - iPad Landscape开始困惑
我的应用只能在横向使用，并且只能在横向启动。因此，iPad为横向时，左上角为（0,0），因此一切正常。但是，当我拿起“ touchesBegan” ...时，它无法正常工作。只有当我像正确的三分之二
ipad - 输入类型编号不适用于 ipad
我在 ionic 中创建输入，它只接受数字。这适用于除 safari 和 ipad 之外的所有浏览器和设备。我不希望用户输入数字以外的任何内容。我尝试对输入事件进行正则表达式验证，但这并不能阻止用户输
ipad - iPad 上的数字键盘？
是否可以在 iPad 中显示仅包含 0-9 数字的键盘？，我不希望键盘显示任何其他内容。我知道有这个键盘类型:数字键盘我们可以在 .xib 文件中，但它显示所有其他额外的字符，包括数字。我想使用这
ipad - SproutCore IPAD
我正在做一个SproutCore项目。我试图按原样在IPAD上获取该站点，但是CSS背景图像，onClick和重定向在IPAD上不起作用。让我知道对此的任何解决方案。最佳答案在iPad上进行开发
ipad - MFMailComposeViewController-iPad
我已经设置了MFMailComposeViewController，它在iPhone上正常工作，但是在iPad上崩溃了，并说: *** Terminating app due to uncaught
ipad - iPad:遍历UITableView中的每个单元格吗？
iPad:遍历UITableView中的每个单元格吗？最佳答案 for (int section = 0; section < [tableView numberOfSections]; secti
ipad - iPad 屏幕键盘的高度是多少？
我在这里寻找两个数字:纵向高度和横向高度。不要以厘米或英寸为单位回答，而以像素为单位。最佳答案纵向高度为 264，横向高度为 352。我知道这是一个迟到的答案，但我自己也遇到了这个问题。关于i
ipad - 播放youtube视频-ipad
在我的应用程序中，我想播放Youtube URL(ipad)。我正在使用下面的代码。它只是向我显示一个白色屏幕 YouTube网址是:http://www.youtube.com/watch？v =
ipad - iPad 用户代理是什么？
据我所知，iPad 使用 iPhone 操作系统，但屏幕分辨率与 iPhone 和 iPod touch 不同。许多网站可能必须更改其用户代理检测以适应 iPad。那么，任何有权访问 iPad 或
ipad - iPad HTML5加载多个音频文件
我想预加载多个音频文件。为此，我尝试在JavaScript中创建多个Audio元素。 function loadAudio(){ audio1 = new Audio(); audio
ipad - iPad 的默认字体是什么
我想使用适用于在所有最新 iPad 上查看的网页的字体。我找到了给定版本的 IOS 附带的字体列表。但这不是我想要的。我更喜欢给定 iPad 实际附带的字体列表，而不是 IOS 版本。如何解决这个问题
ipad - iPad 应用程序的内部使用
是否有可能拥有一个不在应用商店上架的 iPad 单独应用。该应用程序将在某些选定的成员中使用。因此它不需要进入应用商店，因为它不是供公众使用的。最佳答案那么有一些众所周知的可能性: Ad Hoc
ipad - iPad 上字体的亚像素渲染
子像素字体渲染如 ClearType显着提高字体显示分辨率并提高屏幕可读性。我如何对字体的子像素渲染进行编程(一般而言)，以及如何在 iPad 上实现这一点(iOS 设备上的 C、C++ 或 Obje
ipad - 为更大的 iPad 设计的应用程序在 iPad mini 上看起来如何
我正在为 9.7 英寸 iPad 设计一个应用程序。我想知道是否有人对为更大的 iPad 设计的应用程序在 iPad mini 上的外观有任何经验？它会自动缩小，以某种方式在较小的屏幕上完美使用吗？还
ipad - 为什么我的计时器可以在 iPad 模拟器上运行，但不能在 iPad 上运行？
我正在使用所有 UIKit，并且出于原型(prototype)设计的目的，我刚刚将所有逻辑插入了主 viewController。我在 viewDidLoad 中创建了一些 UIView，隐藏了一些，

首页

博学

6Ren·AI

商城

javascript - iPhone iPad iPod 网络应用程序的锁定方向