如何在iPhone Web应用程序中将方向锁定为竖屏模式？

Question

我正在构建一款 iPhone 网页应用，并希望将方向锁定为竖屏模式。这可能吗？是否有任何 WebKit 扩展可以实现这一点？

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

- Kevin

---

构建Web应用而不是本地应用的整个原因在于它可以跨平台，为什么要构建iPhone特定的Web应用程序，你是否考虑编写额外的代码来锁定其他手机？ - user903601

相关链接：https://dev59.com/1G435IYBdhLWcg3wohtT - xdhmoore

我对适用于“小屏幕”的解决方案感兴趣，而不仅仅是针对320像素和苹果制造的事物。 - sheriffderek

Answer 1

这是一个不太正式的解决方案，但至少有点用处。思路是使用CSS转换将页面内容旋转到准肖像模式。以下是用jQuery表达的JavaScript代码，可供参考：

$(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会调整页面内容。令人着迷！

- Grumdrig

---

格朗德里，你是我的英雄！这是我在这个网站上看过的最有用、最有效的iPhone网络应用程序相关提示。非常感谢！ - noober

在阅读这个回答之前，我正打算在“已接受”的答案评论中建议其他人尝试并告诉我是否有效。我真的很高兴有人已经尝试过，并且它确实有效！ - Lane

如果 div 是矩形的呢？如何正确设置变换原点的公式？TA - superjos

您还可以通过xCode下的iPhone/iPod开发信息中的“支持的界面方向”选项来控制它。效果很好。 - Rodrigo Dias

我们不能直接旋转页面主体吗？比如说，$("body").css("-webkit-transform", !portrait ? "rotate(-90deg)" : ""); - Chaitanya Gudala

Answer 2

您可以根据视口方向指定CSS样式：使用body [orient =“landscape”]或body [orient =“portrait”]来针对浏览器进行目标操作。

但是，苹果公司处理此问题的方法是允许开发人员根据方向更改CSS，而不是完全防止重新定向。我在其他地方找到了一个类似的问题： http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari 参考链接：http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/。

- Scott Fox

---

谢谢，但我已经在做那部分了，我真正想要的是防止移动Safari在用户倾斜手机时切换方向。 - Kevin

苹果公司处理这个问题的方式是允许开发人员根据屏幕方向的变化更改 CSS 样式，但不会完全阻止重新调整方向。我在其他地方找到了一个类似的问题：http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari - Scott Fox

我见过一些网站显示一个仅支持横向模式的消息，告知用户该网站只能在竖向模式下查看 - 这只是另一个你可以考虑的选项。 - Jayden Lawson

Answer 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'); 
});

- Andrei Schneider

---

你如何确定变换原点的那些数字？ - superjos

警告!!!并非所有设备都会报告相同的方向值，因此不能依赖于它 http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/ - Rob

Answer 4

我想到了一种只使用CSS的方法来通过媒体查询旋转屏幕。这些查询是基于屏幕尺寸（在此处找到）。 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
    }
}

- Bill

---

在媒体查询中使用（orientation：landscape）而不是特定的像素值如何？还是需要定义确切的像素值？ - Justin Putney

最好使用通用的媒体查询，而不是尝试猜测尺寸：@media all and (orientation:portrait) {...} - GlennG

注意：此值不对应实际设备方向。在大多数设备上以纵向方向打开软键盘会导致视口变得比高更宽，从而使浏览器使用横向样式而非纵向样式。 - sheriffderek

@sheriffderek，你的评论缺乏一些上下文。你是在谈论方向媒体查询吗？能否提供MDN文章的链接？谢谢。 - Bill

方向@media规则——是的。我认为这是正确的方法，直到我读了这篇文章：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation - sheriffderek

Answer 5

Screen.lockOrientation() 可以解决这个问题，但是现在的支持度不是很普遍 (截至 2017 年 4 月):

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

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

- TMan

---

MDN文档建议Safari不支持此功能。 - tsh

Answer 6

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

- escapedcat

Answer 7

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

至于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");

- Fabio Nolasco

---

我在我的WordPress网站的JavaScript代码中使用它，如下所示： screen.lockOrientation("landscape"); 但是它不起作用。我得到了这个错误信息：jQuery(...).lockOrientation不是一个函数。我需要实现任何插件或框架吗？ - Alex Stanese

Answer 8

虽然您无法阻止屏幕方向的更改，但可以像其他答案中所述一样模拟无更改的效果。首先检测设备的方向或重新定位，并使用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%);
}

- Reggie Pinkham

Answer 9

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

    $(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)"

- Philip

Answer 10

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

这个或类似的CSS解决方案，至少可以保留您想要的布局。

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

- dgoldston