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

Question

我正在构建一个iPhone Web应用程序,并希望将方向锁定为纵向模式.这可能吗？是否有任何网络工具包扩展来执行此操作？

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

Answer 1

这是一个非常糟糕的解决方案,但它至少是某些东西(？).我们的想法是使用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,然后页面的内容.诱人!

Answer 2

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

Answer 3

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

@viewport {
    orientation: portrait;
}

规范(进行中):https:
//drafts.c​​sswg.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规则,可以通过orientation在meta标记中设置视口设置,但到目前为止我没有成功.

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

Answer 4

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

Answer 5

Screen.lockOrientation() 解决了这个问题,虽然支持在当时(2017年4月)不太普遍:

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

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

Answer 6

我想出了这种仅使用媒体查询旋转屏幕的CSS方法.查询基于我在此处找到的屏幕尺寸.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
    }
}