如何在 iPhone Web 应用程序中将方向锁定为纵向模式？答案

【问题标题】：How do I lock the orientation to portrait mode in a iPhone Web Application?如何在 iPhone Web 应用程序中将方向锁定为纵向模式？
【发布时间】：2010-11-15 11:22:29
【问题描述】：

我正在构建一个 iPhone Web 应用程序并希望将方向锁定为纵向模式。这可能吗？是否有任何 web-kit 扩展可以做到这一点？

请注意，这是一个用 HTML 和 JavaScript 为 Mobile Safari 编写的应用程序，它不是一个用 Objective-C 编写的本机应用程序。

【问题讨论】：

构建 Web 应用程序而不是原生应用程序的全部原因是它可以跨平台，您为什么要构建 iPhone 特定的 Web 应用程序，您是否正在考虑编写额外的代码来锁定其他应用程序？手机？？？
相关：stackoverflow.com/questions/5298467/…
我对一种适用于“小屏幕”的解决方案感兴趣，而不仅仅适用于苹果制造的 320 像素的东西。

标签： orientation iphone

【解决方案1】：

您可以根据视口方向指定 CSS 样式：使用 body[orient="landscape"] 或 body[orient="portrait"]

定位浏览器

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

不过……

Apple 解决此问题的方法是允许开发人员根据方向更改更改 CSS，但不完全阻止重新定位。我在其他地方发现了一个类似的问题：

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

【讨论】：

谢谢，但我已经在做这部分了，我真正想要的是防止 Mobile Safari 在用户倾斜手机时不切换我的方向。
Apple 解决此问题的方法是允许开发人员根据方向更改更改 CSS，但不能完全阻止重新定向。我在其他地方发现了一个类似的问题：ask.metafilter.com/99784/…
我看到一些网站显示一条仅限横向的消息，指示用户只能以纵向查看该网站 - 这只是您可以考虑的另一种选择。

【解决方案2】：

这是一个非常老套的解决方案，但它至少是一些东西（？）。这个想法是使用 CSS 转换将页面内容旋转到准纵向模式。下面是帮助您入门的 JavaScript（以 jQuery 表示）代码：

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

代码希望页面的全部内容都位于 body 元素内的 div 中。它在横向模式下将该 div 旋转 90 度 - 回到纵向。

留给读者作为练习：div 围绕其中心点旋转，因此它的位置可能需要调整，除非它是完全正方形的。

此外，还有一个不吸引人的视觉问题。当你改变方向时，Safari 会缓慢旋转，然后顶级 div 会捕捉到 90 度的不同。为了更有趣，添加

body > div { -webkit-transition: all 1s ease-in-out; }

到您的 CSS。当设备旋转时，Safari 会旋转，页面内容也会旋转。迷人的！

【讨论】：

格鲁姆德里格，你是我的英雄！这是我在这个网站上见过的最有用和最有效的 iPhone 网络应用相关提示。非常感谢！
在我阅读此回复之前，我正准备在“已接受”的答案中建议其他人应该尝试这个并告诉我它是否有效。我真的很高兴有人已经这样做了，而且确实做到了！
如果 div 是矩形的呢？正确设置变换原点的公式是什么？助教
您也可以通过 xCode 上 Iphone/iPod development info 下的“Supported Interface Orientation”选项来控制它。效果很好
我们不能直接旋转身体本身吗？比如说， $("body").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");

【解决方案3】：

我们的 html5 游戏中使用了以下代码。

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});

【讨论】：

你如何计算出变换原点的那些数字？
警告！！！并非所有设备都报告相同的方向值，因此不能依赖matthewgifford.com/blog/2011/12/22/…

【解决方案4】：

我喜欢告诉用户将他的手机放回纵向模式的想法。就像这里提到的：http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...但使用 CSS 而不是 JavaScript。

【讨论】：

【解决方案5】：

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

这个或类似的 CSS 解决方案至少会保留您的布局，如果这是您所追求的。

根本解决方案是考虑设备的功能，而不是试图限制它们。如果设备不允许您进行适当的限制，那么简单的破解是您最好的选择，因为设计本质上是不完整的。越简单越好。

【讨论】：

【解决方案6】：

Screen.lockOrientation() 解决了这个问题，尽管当时（2017 年 4 月）支持还不够普遍：

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

【讨论】：

MDN 文档提示 Safari 不支持。

【解决方案7】：

我想出了这种使用媒体查询旋转屏幕的纯 CSS 方法。查询基于屏幕尺寸that I found here。 480 像素似乎很好，因为没有/很少有设备的宽度超过 480 像素或高度低于 480 像素。

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

【讨论】：

+1 不错的解决方案。我有一个固定在底部的页脚。知道如何在旋转后显示它吗？
如何在媒体查询中使用（方向：横向）而不是特定的像素值？还是需要定义一个精确的像素值？
我使用了像素值，因为您必须在 html 上设置一个精确值，该值必须与屏幕高度匹配（在横向时 - 所以屏幕宽度）。所以在我的例子@JustinPutney 中使用orientation: landscape 不会那么好用
From MDN: "注意：此值与实际设备方向不对应。在大多数设备上纵向打开软键盘会导致视口变宽大于高度，从而导致浏览器使用横向样式而不是纵向样式。”
方向@媒体规则---是的。认为他们是要走的路，直到我读到这个：developer.mozilla.org/en-US/docs/Web/Guide/CSS/…

【解决方案8】：

如果有人需要的话，在咖啡里。

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"

【讨论】：

【解决方案9】：

也许在新的未来它会有一个开箱即用的解决方案......

至于 2015 年 5 月，

有一个实验功能可以做到这一点。

但它仅适用于 Firefox 18+、IE11+ 和 Chrome 38+。

但是，它还不能在 Opera 或 Safari 上运行。

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

这是兼容浏览器的当前代码：

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

lockOrientation("landscape-primary");

【讨论】：

我在我的wordpress网站的javascript代码中使用它：screen.lockOrientation("landscape");它不起作用。我得到： jQuery(...).lockOrientation 不是一个函数。我需要实现任何插件或框架吗？

【解决方案10】：

点击here 获取我网站上的教程和工作示例。

您不再需要使用 hacks 来查看 jQuery Mobile 屏幕方向，也不应该再使用 PhoneGap，除非您实际使用的是 PhoneGap。

为了在 2015 年完成这项工作，我们需要：

Cordova（4.0 以上的任何版本都更好）
PhoneGap（你甚至可以使用PhoneGap，插件兼容）

这些插件之一取决于您的 Cordova 版本：

net.yoik.cordova.plugins.screenorientation (Cordova

cordova 插件添加 net.yoik.cordova.plugins.screenorientation

cordova 插件添加 cordova-plugin-screen-orientation (Cordova >= 4)

cordova 插件添加cordova-plugin-screen-orientation

要锁定屏幕方向，只需使用此功能：

screen.lockOrientation('landscape');

解锁：

screen.unlockOrientation();

可能的方向：

portrait-primary 方向处于主要纵向模式。
portrait-secondary 方向处于次要纵向模式。
landscape-primary 方向处于主要横向模式。
landscape-secondary 方向处于第二横向模式。
纵向方向是纵向为主或纵向辅助（传感器）。
横向方向是横向主要或横向辅助（传感器）。

【讨论】：

【解决方案11】：

虽然您无法阻止方向更改生效，但您可以模拟其他答案中所述的任何更改。

首先检测设备方向或重定向，然后使用 JavaScript 将类名添加到您的包装元素（在本示例中，我使用 body 标签）。

function deviceOrientation() {
  var body = document.body;
  switch(window.orientation) {
    case 90:
      body.classList = '';
      body.classList.add('rotation90');
      break;
    case -90:
      body.classList = '';
      body.classList.add('rotation-90');
      break;
    default:
      body.classList = '';
      body.classList.add('portrait');
      break;
  }
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();

然后如果设备是横向的，使用 CSS 将 body 宽度设置为视口高度，将 body 高度设置为视口宽度。让我们设置变换原点。

@media screen and (orientation: landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform-origin: 0 0;
  }
}

现在，重新定位 body 元素并将其滑动（平移）到位。

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}

【讨论】：

【解决方案12】：

灵感来自@Grumdrig 的回答，并且由于某些使用过的指令不起作用，如果其他人需要，我建议使用以下脚本：

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });

【讨论】：

【解决方案13】：

我也有类似的问题，但要制作景观...我相信下面的代码应该可以解决问题：

//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
  var orientation = window.orientation;
  if (forceOrientation != undefined)
    orientation = forceOrientation;
  var domElement = document.getElementById('fullscreen-element-div');
  switch(orientation) {
    case 90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
      break;
    case -90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
      break;
    default:
      domElement.style.width = "100vw";
      domElement.style.height = "100vh";
      domElement.style.transformOrigin="";
      domElement.style.transform="";
      break;
  }
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();

<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
  <div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
  <br>
  <input type="button" value="force 90" onclick="processOrientation(90);" /><br>
  <input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
  <input type="button" value="back to normal" onclick="processOrientation();" />
  </div>
</body>
</html>

【讨论】：