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

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

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

1> Grumdrig..：

---

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

---

格鲁德里格,你是我的英雄!这是我在这个网站上见过的最有用和最有用的iPhone网络应用相关提示.非常感谢!

2> Scott Fox..：

---

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

---

Apple解决此问题的方法是允许开发人员根据方向更改来更改CSS,但不能完全阻止重定向.我在其他地方发现了类似的问题:http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

---

我看到一些网站显示一条仅限风景的消息,指示用户此网站只能以纵向方式查看 - 这只是您需要考虑的另一个选项.

3> xdhmoore..：

---

这个答案还不可能,但我发布的是"后代".希望有一天我们能够通过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标记中设置视口设置,但到目前为止我没有成功.

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

---

确实，已经花了很长时间，我想知道是否会过去。我已经添加了指向“ CanIUse”页面的链接。

4> Andrei Schne..：

---

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

---

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

5> TMan..：

---

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

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

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

6> Bill..：

---

我想出了这种仅使用媒体查询旋转屏幕的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
    }
}

---

定位@media规则---是的.在我读到这篇文章之前,我们认为它们是要走的路:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation