当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()无法停止旋转。
有没有办法阻止这种行为？
Jonathan Snook提供了解决此问题的方法。在他的幻灯片这里，他展示了如何（有点）锁定为竖屏（参见第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上实现横屏，但它从未完全正确地显示。然而，我用了下面这段jQueryian代码，接近实现了。代码应该放在onready函数中。另外请注意：这是在“添加到主屏幕”的上下文环境中使用的，我认为这会改变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
而且 CSS 代码是：
.portrait {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 200px 190px;
}
.portrait-onready {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: 165px 150px;
}
希望这能帮助某人接近所需的结果...
在移动版Safari中，无法强制设置特定方向；当用户旋转设备时，它将始终自动旋转。
或许您可以为不支持的方向显示一些内容，提示用户不支持该方向，并需要将设备旋转回来才能使用您的Web应用程序。
虽然您无法阻止设备屏幕方向发生变化，但是可以像其他答案中所述一样模拟不进行更改。
首先检测设备的屏幕方向或重新定向，并使用JavaScript向包装元素（在此示例中使用body标记）添加类名。
function deviceOrientation() {
var body = document.body;
body.classList = '';
switch(window.orientation) {
case 90:
body.classList.add('rotation90');
break;
case -90:
body.classList.add('rotation-90');
break;
default:
body.classList.add('portrait');
break;
}
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();
如果设备处于横屏状态，则使用CSS将body宽度设置为视口高度，将body高度设置为视口宽度。顺便设置一下变换原点。
@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%);
}
也许在不久的未来...
截至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");
以下解决方案似乎在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>
@media (orientation: portrait) {
body {
transform: rotate(-90deg);
}
}
我还没有在iPhone上测试过，但你可以试试看
screen.orientation.lock('portrait');
screen.orientation.unlock();
更多信息请参考MDN