屏幕方向为"纵向"时如何打开模式如果方向为"Landscape">
则隐藏模态这是我当前的脚本。
但如果页面最初以纵向模式加载，则无法工作。
<script>
window.addEventListener("orientationchange", function() {
if(screen.availHeight > screen.availWidth){
$( '#oMsg' ).modal('show');
} else {
$( '#oMsg' ).modal('hide');
}
}, false);
</script>
更新所以我现在在Nitin和Naveen的帮助下更新了我的代码如下
<script>
screen.orientation.addEventListener('change', function(e) {
scrFunction();
}, false);
</script>
<script>
function scrFunction() {
if(screen.availHeight > screen.availWidth){
$( '#oMsg' ).modal('show');
}
}
</script>
我也改变了我的身体
<body onload="scrFunction()">
但现在我的问题是，即使它检测的方向在页面加载，一旦我改变方向回到横向，模型仍然在那里。它没有移除…
您可以使用<body onload="myFunction()">
(或)
add event "load">
(或)
窗口。Onload vs document.onload
不支持使用window.orientationchange。用screen.orientation.onchange代替。
window.addEventListener('DOMContentLoaded', (event) => {
toggleModalForScreen();
screen.orientation.addEventListener('change', function(e) {
toggleModalForScreen();
});
});
function toggleModalForScreen() {
if (screen.availHeight > screen.availWidth) {
$('#oMsg').modal('show');
} else {
$('#oMsg').modal('hide');
}
}
文档:https://w3c.github.io/screen-orientation/screen-orientation-types-and-locks