防止iOS Safari中的方向更改

当设备旋转时，是否可以避免在Safari for iOS中过渡到横向视图？防止iOS Safari中的方向更改

iOS的Safari浏览器有“orentationchange”事件，我试图拦截它，并禁用默认的行为，就像这样：

<html> 
<head> 
<script type="text/javascript"> 
function changeOrientation(event) { 
    alert("Rotate"); 
    event.preventDefault(); 
} 
</script> 
</head> 
<body onorientationchange="changeOrientation(event);"> 
PAGE CONTENT 
</body> 
</html>

，但在我的iPhone，测试页面的时候，当我旋转设备警报显示，但视图切换到横向。看来，event.preventDefault（）不会停止旋转。

有没有办法阻止这种行为？

来源

2011-03-14 Davide Gualano

相关：http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application – xdhmoore 2013-09-04 20:13:14

阅读由@xdhmoore链接的问题。除此之外，这是非常值得的。 – Boaz 2014-09-09 08:23:45

在Mobile Safari中无法强制特定的方向;当用户旋转设备时，它总是会自动旋转。

也许您可以显示某些不支持的方向，通知用户方向不受支持，并且他们需要旋转设备以使用您的Web应用程序。

来源

2011-03-14 12:27:53 BoltClock

-3

如果有可能（我不相信它），那么我强烈建议不要这样做。用户讨厌被迫以特定的方式浏览网页。如果他们在码头上使用他们的iPhone，并且无法将其横向放置在横向模式下，或者他们更喜欢横向版键盘，那么键会更大，会怎么样？

如果您的设计需要特定的方向，那么您可能需要重新考虑您的设计。

来源

2011-03-14 12:31:54 GordonM

我正在构建的web应用程序针对的是在城市周围步行的用户，所以我一直在想，默认的纵向视图可能是更自然的体验方式。我必须考虑不同的情况，谢谢指出这一点。 – 2011-03-14 13:20:35

+12

如果您的应用使用deviceorientation事件作为例子，那么当用户将设备向一个方向移动得太远时，您不希望它自动旋转，否则游戏会变得非常烦人。 – 2011-07-16 01:21:26

这类评论太傲慢了。大多数非书呆子用户仅使用这些“自定义视图”选项，因为他们正在查看的网页具有可怕的可用性和布局或小字体等等......简单地声明用户需要灵活性并不是很有帮助。一个用于防止自动旋转内容的元标记是非常有保证的 - 应用程序可以做到这一点... – tim 2012-09-25 20:12:03

Jonathan Snook已解决此问题。在他的幻灯片here中，他演示了如何（有点）锁定肖像（请参见幻灯片54和55）。

从这些幻灯片的JS代码：

window.addEventListener('orientationchange', function() { 
    if (window.orientation == -90) { 
     document.getElementById('orient').className = 'orientright'; 
    } 
    if (window.orientation == 90) { 
     document.getElementById('orient').className = 'orientleft'; 
    } 
    if (window.orientation == 0) { 
     document.getElementById('orient').className = ''; 
    } 
}, true);

和CSS：

.orientleft #shell { 
    -webkit-transform: rotate(-90deg); 
    -webkit-transform-origin:160px 160px; 
} 

.orientright #shell { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin:230px 230px; 
}

我试图让本作景观在iPhone上工作，但是它永远不会看着100 ％正确。然而，我接近了下面的jQuery代码。这将在onready函数中。还要注意：这是在“保存到主屏幕”的上下文中，我认为这改变了转换起源的位置。

$(window).bind('orientationchange', function(e, onready){ 
    if(onready){ 
     $(document.body).addClass('portrait-onready'); 
    } 
    if (Math.abs(window.orientation) != 90){ 
     $(document.body).addClass('portrait'); 
    } 
    else { 
     $(document.body).removeClass('portrait').removeClass('portrait-onready'); 
    } 
}); 
$(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure

而CSS：

.portrait { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 200px 190px; 
} 
.portrait-onready { 
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin: 165px 150px; 
}

希望帮助别人亲近期望的结果...

来源

2011-08-15 05:35:55 fisherwebdev

你是否尝试将变换原点更改为0,0？ – tim 2012-09-25 20:14:16

我投了这个票，只因为它让我笑得这么厉害。巧妙！ – Westie 2013-10-01 16:44:57

我有这个想法，但不知道它是否会奏效......很高兴听到它：D这应该是接受的答案 – nevelis 2014-09-28 20:38:52

一个spec来实现这个功能已经被提出。

另请参阅this Chromium bug以获取更多信息（仍不清楚它是否会在WebKit或Chromium中实现）。

来源

2012-03-05 06:09:55

我认为对于我们的情况，我们需要提供一个统一的数据视图，我们正在屏幕上显示医学调查数据，不允许旋转设备的屏幕。我们设计应用程序以纵向工作。因此，最好的解决方案是锁定它，这不能通过浏览器完成，或者显示一个错误/消息，指示应用程序在方向修复之前无法使用。

来源

2012-05-16 17:54:05

也许在新的未来......

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

来源

2015-05-13 18:37:19

下面的解决方案似乎为我工作iPhone4上，5，6，和6+为2016年6月的

<script> 
    /** 
    * we are locking mobile devices orientation to portrait mode only 
    */ 
    var devWidth, devHeight; 
    window.addEventListener('load', function() { 
    devWidth = screen.width; 
    devHeight = screen.height; 
    }); 
    window.addEventListener('orientationchange', function() { 
    if (devWidth < 768 && (window.orientation === 90 || window.orientation == -90)) { 
     document.body.style.width = devWidth + 'px'; 
     document.body.style.height = devHeight + 'px'; 
     document.body.style.transform = 'rotate(90deg)'; 
     document.body.style.transformOrigin = ''+(devHeight/2)+'px '+(devHeight/2)+'px'; 
    } else { 
     document.body.removeAttribute('style'); 
    } 
    }, true); 
</script>

来源

2016-06-03 22:23:02 allenhwkim

虽然你不能阻止发生作用的方向变化在超视距说，你可以模拟任何变化呃答案。

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

来源

2016-11-27 09:01:18

防止iOS Safari中的方向更改

回答

相关问题