当设备旋转时，是否可以避免在 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() 不会停止旋转。
有没有办法阻止这种行为？
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 上适用于横向，但它从未看起来 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;
}
希望能帮助某人接近预期的结果......
无法在 Mobile 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 将主体宽度设置为视口高度，将主体高度设置为视口宽度。让我们设置变换原点。
@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%);
}
一个规范提出了实现这一功能。
此外，请参阅此 Chromium 错误以获取更多信息（仍不清楚它是否会在 WebKit 或 Chromium 中实现）。
也许在新的未来......
至于 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");