使用JavaScript实现竖屏打开Bootstrap Modal横屏隐藏的问题修复

问题根因 #

你更新后的scrFunction函数仅包含竖屏状态下显示Modal的逻辑，没有补充横屏状态下的隐藏分支，因此切换到横屏时没有触发Modal隐藏的动作。

修正方案 #

补全scrFunction的横屏判断分支，同时优化页面初始加载的触发逻辑，无需依赖body的onload属性，避免等待页面所有资源加载完成才执行判断。
完整代码如下：

<script>
// 页面DOM加载完成后立即执行一次方向判断
document.addEventListener('DOMContentLoaded', scrFunction);
// 监听屏幕方向变化事件
screen.orientation.addEventListener('change', scrFunction, false);
// 兼容旧版浏览器的方向变化事件，覆盖更多设备
window.addEventListener('orientationchange', scrFunction, false);

function scrFunction() {
    if(screen.availHeight > screen.availWidth){
        // 竖屏显示Modal
        $( '#oMsg' ).modal('show');  
    } else {
        // 横屏隐藏Modal
        $( '#oMsg' ).modal('hide');
    }
}
</script>

body标签可以直接移除onload属性，正常写<body>即可。

注意事项 #

• 确保这段脚本引入在jQuery和Modal依赖的JS文件之后，避免$未定义或者modal方法调用失败
• 如果测试时发现部分设备方向判断不准，可以替换判断条件为window.innerHeight > window.innerWidth，适配部分全屏场景下的方向识别

内容的提问来源于stack exchange，提问作者Veenavi Anutthara