如何在iPhone Web应用程序中将方向locking到纵向模式？

我正在构build一个iPhone Web应用程序，并希望将方向locking到纵向模式。 这可能吗？ 有没有任何networking套件扩展来做到这一点？

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

Answer 1

您可以根据视口方向指定CSS样式：使用body [orient =“landscape”]或body [orient =“portrait”]来定位浏览器

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

然而…

苹果公司解决这个问题的方法是允许开发人员根据方向变化来更改CSS，但不能完全防止重新定位。 我在其他地方发现了类似的问题

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

Answer 2

这是一个非常冒险的解决scheme，但至less有一些（？）。 这个想法是使用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做，然后你的页面的内容。 诱人！

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/

我曾经假设，因为它可能与build议@viewport规则，这将有可能通过在meta标记的视口设置orientation设置，但我迄今没有成功。

随着事情的改善，随时更新这个答案。

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

我想出了这种使用媒体查询旋转屏幕的CSS方法。 查询是基于我在这里find的屏幕大小。 480px似乎是好的，因为没有/很less的设备具有超过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 } } 

Answer 6

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

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

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

Answer 7

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

Answer 8

也许在新的未来，它将有一个开箱即用的解决scheme…

截至二零一五年五月，

有一个实验function，这样做。

但它只适用于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"); 

Answer 9

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

这个或者类似的CSS解决scheme，至less可以保留你的布局。

根解决scheme是考虑设备的能力，而不是试图限制它们。 如果设备不允许你比简单的黑客适当的限制是最好的select，因为devise基本上是不完整的。 越简单越好。

Answer 10

在咖啡，如果任何人需要它。

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

Answer 11

虽然你不能阻止方向改变的生效，你可以效仿其他答案中所述的没有改变。

首先检测设备方向或redirect，并使用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%); } 

Answer 12

受@ Grumdrig的回答启发，并且因为一些使用的指令不起作用，所以如果别人需要，我build议下面的脚本：

  $(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); }); 

Answer 13

点击这里查看我的网站上的教程和工作示例。

您不再需要使用黑客来查看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插件屏幕方向

而要locking屏幕方向只是使用这个function：

 screen.lockOrientation('landscape'); 

解锁它：

 screen.unlockOrientation(); 

可能的方向：

• 肖像主要方向是在主肖像模式。

• portrait-secondary方向处于辅助人像模式。

• 景观主要方向是在主要景观模式。

• 风景二级方向是在二级风景模式。

• 纵向方向可以是纵向或者纵向（传感器）。

• 风景方向是风景主要或风景 – 次要（传感器）。