防止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。
