我正在构建一个iPhone Web应用程序，并希望将方向锁定为纵向模式。这可能吗？是否有任何网络工具包扩展来执行此操作？
请注意，这是一个用HTML和JavaScript编写的适用于Mobile Safari的应用程序，它不是用Objective-C编写的本机应用程序。
答案 0 :(得分：96)
这是一个非常糟糕的解决方案，但它至少是某些东西（？）。我们的想法是使用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，然后页面的内容。欺骗性！
答案 1 :(得分：69)
您可以根据视口方向指定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
答案 2 :(得分：35)
这个答案还不可能，但我是为“后代”发布的。 希望有一天我们能够通过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 Spec看起来也很相似：
https://w3c.github.io/screen-orientation/
我之所以认为，因为可以使用建议的@viewport规则，可以在orientation标记的视口设置中设置meta，但我已经有了到目前为止没有成功。
随着情况的改善，请随时更新此答案。
答案 3 :(得分：19)
我们的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');
});
答案 4 :(得分：5)
Screen.lockOrientation()解决了这个问题，虽然当时（2017年4月）支持不太普遍：
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
答案 5 :(得分：5)
我想出了这种仅使用媒体查询旋转屏幕的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
}
}
答案 6 :(得分：3)
我喜欢告诉用户将手机重新置于纵向模式的想法。 就像在这里提到的那样：http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...但是使用CSS代替JavaScript。
答案 7 :(得分：2)
也许在新的未来，它将有一个开箱即用的解决方案......
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");
答案 8 :(得分：0)
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
这个或类似的CSS解决方案至少会保留您的布局，如果这是您所追求的。
根解决方案是考虑设备的功能而不是试图限制它们。如果设备不允许你适当的限制而不是简单的黑客是你最好的选择，因为设计基本上是不完整的。越简越好。
答案 9 :(得分：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)"
答案 10 :(得分：0)
虽然您无法阻止方向更改生效，但您可以模仿其他答案中所述的更改。
首先检测设备方向或重新定向，然后使用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元素并将其滑动（平移）到位。
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
答案 11 :(得分：0)
受到@ Grumdrig的回答的启发，并且由于某些使用的说明不起作用，如果其他人需要，我建议使用以下脚本：
#attribute45896{
content:" ";
background-image:url('http://rapido.ir/wp-content/uploads/2017/02/blue.png');
background-size:30px;
background-position:left center;
background-repeat:no-repeat;
padding-left:40px}答案 12 :(得分：0)
我有一个类似的问题，但是要使风景更美...我相信下面的代码应该可以解决问题：
//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
var orientation = window.orientation;
if (forceOrientation != undefined)
orientation = forceOrientation;
var domElement = document.getElementById('fullscreen-element-div');
switch(orientation) {
case 90:
var width = window.innerHeight;
var height = window.innerWidth;
domElement.style.width = "100vh";
domElement.style.height = "100vw";
domElement.style.transformOrigin="50% 50%";
domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
break;
case -90:
var width = window.innerHeight;
var height = window.innerWidth;
domElement.style.width = "100vh";
domElement.style.height = "100vw";
domElement.style.transformOrigin="50% 50%";
domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
break;
default:
domElement.style.width = "100vw";
domElement.style.height = "100vh";
domElement.style.transformOrigin="";
domElement.style.transform="";
break;
}
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
<div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
<br>
<input type="button" value="force 90" onclick="processOrientation(90);" /><br>
<input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
<input type="button" value="back to normal" onclick="processOrientation();" />
</div>
</body>
</html>
答案 13 :(得分：-2)
点击here获取我的网站上的教程和工作示例。
除非您实际使用PhoneGap，否则您不再需要使用黑客来查看jQuery Mobile Screen Orientation，也不应再使用PhoneGap。
要在2015年完成这项工作，我们需要：
其中一个插件取决于您的Cordova版本：
cordova插件添加net.yoik.cordova.plugins.screenorientation
cordova插件添加cordova-plugin-screen-orientation
要锁定屏幕方向，只需使用此功能：
screen.lockOrientation('landscape');
要解锁它：
screen.unlockOrientation();
可能的方向：
portrait-primary 方向处于主要人像模式。
纵向次要方向处于次要人像模式。
landscape-primary 方向处于主要横向模式。
landscape-secondary 方向处于次要横向模式。
人像方向为纵向 - 主要或纵向 - 次要（传感器）。
风景方向为横向 - 主要或横向 - 次要（传感器）。