我怎么锁定方向，以纵向方式，在iPhone网应用程序？
https://stackoverflow.com/questions/1207008
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我要建一个iPhone网应用程序和要锁定的方向，以纵向方式。这可能吗？是否有任何网络的工具包扩展到这么做吗？
请注意，这是一个应用程序编写HTML和JavaScript移动野生动物园，这不是一个本地应用程序编写的目标。
解决方案
您可以根据视口方向指定CSS样式： 使用body [orient = <！> quot; landscape <！> quot;]或body [orient = <！> quot; portrait <！> quot;]
定位浏览器http://www.evotech.net /博客/ 2007/07 / Web开发 - 换了，iphone /
...然而
Apple解决此问题的方法是允许开发人员根据方向更改来更改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; }
到你的CSS。当设备旋转，然后是Safari，然后页面的内容。欺骗性！
这答案是不可能的，但我张贴于"后代"。我们希望，有一天，我们将能够做到这一点通过CSS@视的规则：
@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浏览器的兼容性表和下列文章中，看起来像有一些支持，在某些版本的即和歌剧院：
http://menacingcloud.com/?c=cssViewportOrMetaTag
这JS API规范也看起来相关的：
https://w3c.github.io/screen-orientation/
我不得不假设，因为它可能提议的 @viewport 项规则，它将有可能通过设定 orientation 在视区设置在一个 meta 标记，但是我没有成功，这一点为止。
随时更新这个答案，事情有所改善。
我们的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');
});
我想出了这种仅使用媒体查询旋转屏幕的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
}
}
Screen.lockOrientation()解决了这个问题，虽然当时（2017年4月）的支持率不够普及：
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en -US /文档/网络/ API / Screen.lockOrientation
我喜欢告诉用户将手机重新置于纵向模式的想法。 就像它在这里提到的那样： http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ...但是使用CSS代替JavaScript。
也许在新的未来，它将有一个开箱即用的解决方案......
2015年5月，
有一个实验功能可以做到这一点。
但它仅适用于Firefox 18 +，IE11 +和Chrome 38 +。
但是，它在Opera或Safari上还不起作用。
https://developer.mozilla.org/ EN-US /文档/网络/ API /屏幕/ lockOrientation＃Browser_compatibility
以下是兼容浏览器的当前代码：
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px
html {
width: 320px;
overflow-x: hidden;
}
这个或类似的CSS解决方案至少会保留您的布局，如果这是您所追求的。
根解决方案是考虑设备的功能而不是试图限制它们。如果设备不允许你适当的限制而不是简单的黑客是你最好的选择，因为设计基本上是不完整的。越简越好。
咖啡，如果有人需要它。
$(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)"
虽然您无法阻止方向更改生效，但您可以模仿其他答案中所述的更改。
首先检测设备方向或重新定向，然后使用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将主体宽度设置为视口高度，将主体高度设置为视口宽度。让<！>＃8217; s设置变换原点，而我们<！>＃8217;重新开始。
@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%);
}
受到@ Grumdrig的回答的启发，并且由于某些使用的说明不起作用，如果其他人需要，我建议使用以下脚本：
$(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);
});
点击 在这里， 一教程和工作实例，从我的网站。
你不再需要用黑客只是为了看看jQuery的手机屏幕上的取向，也不应该使用。了，除非你真的使用。.
为了使这项工作在2015年，我们需要：
- Córdoba(任何版本虽然任何东西上述4.0是更好)
- 。(你甚至可以使用。、插件是兼容的)
和这些中的一个插件取决于你的Córdoba的版本：
- 网。yoik.科尔多瓦。插件。screenorientation(Córdoba < 4)
科尔多瓦插件增加净额。yoik.科尔多瓦。插件。screenorientation
- 科尔多瓦插件加córdoba-插画面取向(Córdoba>=4)
科尔多瓦插件加córdoba-插画面取向
和锁定屏幕的方向，只要使用这个功能：
screen.lockOrientation('landscape');
解开它：
screen.unlockOrientation();
可能的方向：
肖像主 方向是在主要的肖像的模式。
肖像辅助 方向是在次级肖像的模式。
风景-主 方向是在主要的横向模式。
风景-次 方向是在二次横向模式。
肖像 方位是肖像主或肖像学(传感器)。
的风景 方向是横向初级或横向学(传感器)。
