防止iOS Safari中的方向更改

当设备旋转时,是否有可能避免在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> 

但是当testing我的iPhone上的页面时,当我旋转设备的警报显示,但视图切换到风景。 看来event.preventDefault()不会停止旋转。

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

移动Safari中无法强制特定的方向; 当用户旋转他们的设备时,它总是会自动旋转。

也许你可以显示不支持的方向的东西,通知用户方向不受支持,并且他们需要旋转设备以便使用你的web应用程序。

Jonathan Snook解决了这个问题。 在这里的幻灯片中,他展示了如何(有点)locking肖像(参见幻灯片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代码。 这将在onreadyfunction。 另外请注意:这是在“保存到主屏幕”的上下文中,我认为这改变了转换起源的位置。

 $(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; } 

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

已经提出了一个实现这个function的规范 。

此外,请参阅此Chromium错误以获取更多信息(尚不清楚它是否将在WebKit或Chromium中实现)。

虽然你不能阻止方向改变的生效,你可以效仿其他答案中所述的没有改变。

首先检测设备方向或redirect,并使用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%); } 

也许在一个新的未来…

截至二零一五年五月,

有一个实验function,这样做。 但它只适用于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"); 

我认为对于我们的情况,我们需要提供一个一致的观察数据,我们正在屏幕上显示的医疗调查,旋转的设备的屏幕是不能允许的。 我们devise的应用程序工作在肖像。 因此,最好的解决scheme是将其locking,不能通过浏览器进行locking,或者显示错误/消息,指示应用程序在方向固定之前无法使用。

截至2016年6月,iPhone4,5,6和6+以下解决scheme似乎适用于我。

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

如果有可能(我不相信),那么我强烈build议不要这样做。 用户讨厌被迫以特定的方式浏览网页。 如果他们在docker上使用他们的iphone,如果没有解除连接,就无法在横向模式下支持它,或者如果他们更喜欢键盘的横向版本,那么键会更大?

如果你的devise需要一个特定的方向,那么你可能想重新考虑你的devise。