Dav*_*ano 32 html javascript safari orientation ios
旋转设备时,是否可以避免在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()不会停止旋转.
有没有办法阻止这种行为？
fis*_*dev 53
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;
}
希望能帮助某人接近理想的结果......
Bol*_*ock 22
在Mobile Safari中无法强制使用特定方向; 当用户旋转设备时,它将始终自动旋转.
也许您可以显示不受支持的方向的内容,通知用户不支持方向,并且他们需要将设备旋转回来才能使用您的Web应用程序.
虽然您无法阻止方向更改生效,但您可以模仿其他答案中所述的更改.
首先检测设备方向或重新定向,然后使用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%);
}
| 归档时间： |
|
| 查看次数： |
83140 次 |
| 最近记录： |