Question

旋转设备时，是否可以避免在Safari for iOS中过渡到横向视图？

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（）不会停止旋转。

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

Answer 1

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上使用 landscape ，但它看起来从未100％正确。然而，我接近以下jQueryian代码。这将在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;
}

希望能帮助某人接近理想的结果......

Answer 2

无法在Mobile Safari中强制使用特定方向;当用户旋转设备时，它将始终自动旋转。

也许您可以显示不支持的方向，告知用户不支持方向，并且需要将设备旋转回来才能使用您的网络应用。

Answer 3

已提出实现此功能的spec。

另外，请参阅this Chromium bug了解更多信息（目前尚不清楚它是否会在WebKit或Chromium中实施）。

Answer 4

虽然您无法阻止方向更改生效，但您可以效仿，如其他答案中所述。

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

Answer 5

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

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

Answer 6

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

Answer 7

截至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>

Answer 8

我测试这种方式对我有用：

getPath

Answer 9

如果有可能（我不相信），那么我强烈建议不要这样做。用户讨厌被迫以特定方式查看页面。如果他们在一个底座中使用他们的iphone并且在没有脱机的情况下无法在横向模式下使用它，或者如果他们更喜欢键盘的横向版本，因为按键更大会怎么样？

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

防止iOS Safari中的方向更改

9 个答案: