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

13 回答

• 35

  您可以根据视口方向指定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

  回复于 2024-04-29T08:14:25+08:00
• 5

  这是一个非常糟糕的解决方案，但它至少是某些东西（？） . 我们的想法是使用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内 . 它在横向模式下旋转90度 - 回到肖像 .

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

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

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

  到你的CSS . 当设备旋转，然后是Safari，然后页面的内容 . 诱人！

  回复于 2024-04-29T08:14:25+08:00
• 0

  这个答案还不可能，但我发布的是“后代” . 希望有一天我们能够通过CSS @viewport规则做到这一点：

  @viewport {
      orientation: portrait;
  }
  

  规格（正在处理中）：
  https://drafts.csswg.org/css-device-adapt/#orientation-desc

  MDN：
  https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

  基于MDN浏览器兼容性表和下面的文章，看起来在某些版本的IE和Opera中有一些支持：
  http://menacingcloud.com/?c=cssViewportOrMetaTag

  这个JS API规范看起来也很相关：
  https://w3c.github.io/screen-orientation/

  我曾经假设，因为有可能使用建议的 @viewport 规则，可以通过在 meta 标签的视口设置中设置 orientation ，但到目前为止我没有成功 .

  随着事情的改善，随意更新此答案 .

  回复于 2024-04-29T08:14:25+08:00
• 68

  我们的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'); 
  });
  

  回复于 2024-04-29T08:14:25+08:00
• 3

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

  @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
      }
  }
  

  回复于 2024-04-29T08:14:25+08:00
• 5

  Screen.lockOrientation() 解决了这个问题，虽然当时（2017年4月）支持不太普遍：

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

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

  回复于 2024-04-29T08:14:25+08:00
• 2

  我喜欢告诉用户将手机重新置于纵向模式的想法 . 就像它在这里提到的那样：http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...但是使用CSS而不是JavaScript .

  回复于 2024-04-29T08:14:25+08:00
• 0

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

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

  回复于 2024-04-29T08:14:25+08:00
• 0

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

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

  根解决方案是考虑设备的功能而不是试图限制它们 . 如果设备不允许你适当的限制而不是简单的黑客攻击是最好的选择，因为设计基本上是不完整的 . 越简单越好 .

  回复于 2024-04-29T08:14:25+08:00
• 95

  在咖啡，如果有人需要它 .

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

  回复于 2024-04-29T08:14:25+08:00
• 19

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

  首先检测设备方向或重新定向，然后使用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将主体宽度设置为视口高度，将主体高度设置为视口宽度 . 让我们设置转换起源，而我们在它 .

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

  现在，重新定向主体元素并将其滑动（平移）到位 .

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

  回复于 2024-04-29T08:14:25+08:00
• 0

  受到@ 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);
      });
  

  回复于 2024-04-29T08:14:25+08:00
• -2

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

  您不再需要使用hacks来查看jQuery Mobile Screen Orientation，也不再使用PhoneGap，除非您实际使用的是PhoneGap .

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

  • Cordova（任何版本，但4.0以上的任何版本更好）

  • PhoneGap（你甚至可以使用PhoneGap，插件兼容）

  其中一个插件取决于您的Cordova版本：

  • net.yoik.cordova.plugins.screenorientation（Cordova <4）

  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 方向处于次要横向模式 .

  • portrait 方向为纵向 - 主要或纵向 - 次要（传感器） .

  • landscape 方向为横向 - 主要或横向 - 次要（传感器） .

  回复于 2024-04-29T08:14:25+08:00