防止 iOS Safari 中的方向更改
[英]Prevent orientation change in iOS Safari
问题描述
Is it possible to avoid transition to landscape view in Safari for iOS when the device is rotated?
当设备旋转时，是否可以避免在 Safari for iOS 中转换为横向视图？
iOS Safari has the "orentationchange" event, I tried to intercept it and disable the default behavior, like this: 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>
but when testing the page on my iPhone, when I rotate the device the alert is shown, but the view switch to landscape.但是在我的 iPhone 上测试页面时，当我旋转设备时会显示警报，但视图会切换到横向。 It seems that event.preventDefault() does not stops the rotation.似乎 event.preventDefault() 不会停止旋转。
Is there a way to block this behavior?有没有办法阻止这种行为？
9 个解决方案
解决方案1
56 2011-08-15 05:35:55
Jonathan Snook has a work around to this problem. Jonathan Snook解决了这个问题。 In his slideshere , he shows how to (sort of) lock to portrait (see slide 54 and 55).在此处的幻灯片中，他展示了如何（某种程度上）锁定肖像（请参阅幻灯片 54 和 55）。
The JS code from those slides:这些幻灯片中的 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);
and the CSS:和 CSS：
.orientleft #shell {
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:160px 160px;
}
.orientright #shell {
-webkit-transform: rotate(90deg);
-webkit-transform-origin:230px 230px;
}
I tried to get this working for landscape on the iPhone, but it never looked 100% correct.我试图让它在 iPhone 上适用于横向，但它从未看起来 100% 正确。 I came close with the following jQueryian code, however.但是，我很接近以下 jQueryian 代码。 This would be within the onready function.这将在 onready 函数内。 Also note: this was within a "saved to homescreen" context, and I think that altered the position of the tranform-origin.另请注意：这是在“保存到主屏幕”上下文中，我认为这改变了转换原点的位置。
$(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
And the CSS:和 CSS：
.portrait {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 200px 190px;
}
.portrait-onready {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 165px 150px;
}
Hope that helps someone get close to the desired result...希望能帮助某人接近预期的结果......
解决方案2
25 已采纳 2011-03-14 12:27:53
There is no way to force a particular orientation in Mobile Safari;无法在 Mobile Safari 中强制特定方向； it'll always autorotate when the user rotates their device.当用户旋转他们的设备时，它总是会自动旋转。
Perhaps you can display something for unsupported orientations informing the user that the orientations aren't supported, and that they need to rotate the device back in order to use your web app.也许您可以针对不支持的方向显示一些内容，通知用户不支持这些方向，并且他们需要将设备向后旋转才能使用您的 Web 应用程序。
解决方案3
5 2016-11-27 09:01:18
While you cannot prevent orientation change from taking effect you can emulate no change as stated in other answers.虽然您无法阻止方向更改生效，但您可以模拟其他答案中所述的任何更改。
First detect device orientation or reorientation and, using JavaScript, add a class name to your wrapping element (in this example I use the body tag).首先检测设备方向或重定向，然后使用 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();
Then if the device is landscape, use CSS to set the body width to the viewport height and the body height to the viewport width.然后如果设备是横向的，使用 CSS 将主体宽度设置为视口高度，将主体高度设置为视口宽度。 And let's set the transform origin while we're at it.让我们设置变换原点。
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Now, reorient the body element and slide (translate) it into position.现在，重新定向 body 元素并将其滑动（平移）到位。
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
解决方案4
5 2012-03-05 06:09:55
A spec to implement this functionality has been proposed.已经提出了实现此功能的规范。
Also, see this Chromium bug for additional information (still unclear whether it will be implemented in WebKit or Chromium).另外，请参阅此 Chromium 错误以获取更多信息（仍不清楚它是否会在 WebKit 或 Chromium 中实现）。
解决方案5
3 2015-05-13 18:37:19
Maybe in a new future...也许在新的未来......
As for May 2015,至于 2015 年 5 月，
there is an experimental functionality that does that.有一个实验功能可以做到这一点。 But it only works on Firefox 18+, IE11+, and Chrome 38+.但它仅适用于 Firefox 18+、IE11+ 和 Chrome 38+。
However, it does not work on Opera or Safari yet.但是，它还不适用于 Opera 或 Safari。
https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility
Here is the current code for the compatible browsers:以下是兼容浏览器的当前代码：
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
解决方案6
1 2012-05-16 17:54:05
I think for our case where we need to provide a consistent view of the data we are displaying on the screen for medical surveys, rotation of the device's screen cannot be allowed.我认为对于我们需要为医疗调查屏幕上显示的数据提供一致视图的情况，不允许旋转设备屏幕。 We design the application to work in portrait.我们将应用程序设计为纵向工作。 So the best solution for use is to either lock it, which can't be done via the browser, or display an error/message indicating the application can't be used until the orientation is fixed.因此，最好的使用解决方案是锁定它，这无法通过浏览器完成，或者显示错误/消息，指示在方向固定之前无法使用该应用程序。
解决方案7
1 2016-06-03 22:23:02
The following solution seems working for me on iPhone4, 5, 6, and 6+ as of June 2016.截至 2016 年 6 月，以下解决方案似乎适用于 iPhone4、5、6 和 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>
解决方案8
0 2020-02-29 09:42:48
I test this way work for me:我测试这种方式对我有用：
@media (orientation: portrait) {
body {
transform: rotate(-90deg);
}
}
解决方案9
-4 2011-03-14 12:31:54
If it is possible (which I don't believe it is), then I'd strongly advise against it.如果可能（我不相信），那么我强烈建议不要这样做。 Users hate being forced into viewing pages in a particular way.用户讨厌被迫以特定方式查看页面。 What if they're using their iphone in a dock and can't stand it in landscape mode without undocking it, or what if they prefer the landscape version of the keyboard because the keys are bigger?如果他们在底座上使用他们的 iphone 并且无法在不打开底座的情况下在横向模式下放置它，或者如果他们更喜欢键盘的横向版本，因为键更大怎么办？
If your design requires a particular orientation then you might want to rethink your design.如果您的设计需要特定的方向，那么您可能需要重新考虑您的设计。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.