如何在 iPhone Web 应用程序中将方向锁定到肖像模式？

您可以根据视图方向指定 CSS 样式: 用 body [ orient = “ scape”]或 body [ orient = “ trait”]作为浏览器的目标

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

这是一个相当粗糙的解决方案，但它至少是一些(?).其思想是使用 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; }

当设备旋转，然后 Safari 做，然后你页面的内容做。迷人！

在我们的 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://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ 而是使用 CSS 而不是 JavaScript。

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

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

根本解决方案是考虑设备的能力，而不是试图限制它们。如果设备不允许你适当的限制比一个简单的黑客是你最好的赌注，因为设计本质上是不完整的。越简单越好。

Screen.lockOrientation()解决了这个问题，尽管当时的支持还不够普遍(2017年4月) :

Https://www.w3.org/tr/screen-orientation/

Https://developer.mozilla.org/en-us/docs/web/api/screen.lockorientation

我想出了这个 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
}
}

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

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

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

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

单击 给你获得我网站上的教程和工作示例。

您不再需要使用 Hacks 来查看 jQuery 移动屏幕方向，也不应该再使用 PhoneGap，除非您实际上正在使用 PhoneGap。

为了在2015年实现这一目标，我们需要:

• Cordova (任何版本都比4.0更好)
• PhoneGap (你甚至可以使用 PhoneGap，插件是兼容的)

其中一个插件取决于你的 Cordova 版本:

• 针对 net.yoik.Cordova.plugins.screen 方向(Cordova < 4)

Cordova 插件添加 net.yoik.cordova.plugins.screen 方向

• 科尔多瓦插件添加科尔多瓦-插件-屏幕方向(科尔多瓦 > = 4)

科尔多瓦插件添加科尔多瓦-插件-屏幕方向

要锁定屏幕方向，只需使用以下函数:

screen.lockOrientation('landscape');

打开它:

screen.unlockOrientation();

可能的方向:

• 方向处于主纵向模式。

• 方向是在第二纵向模式。

• 景观-主要景观 方向为主要景观模式。

• 景观-次级景观 方向为次级景观模式。

• 方向可以是纵向-主要的或纵向-次要的(传感器)。

• 方向是景观-主要或景观-次要(传感器)。