判断横竖屏的最佳实现

1、CSS Media Queries

1.内联样式

@media screen and (orientation:portrait) {
    
    //竖屏
}

@media screen and (orientation:landscape) {
    
    //横屏
}

2.外联样式

<!-- 竖屏 -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="..." />

<!-- 横屏 -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="..." />

3.window.matchMedia()

var mql = window.matchMedia("(orientation: portrait)");
function onMatchMeidaChange(mql){
    
    if(mql.matches) {
    
        // 竖屏
    }else {
    
        // 横屏
    }
}
onMatchMeidaChange(mql);
mql.addListener(onMatchMeidaChange);

4.window.innerHeight/window.innerWidth

function detectOrient(){
    
    if(window.innerHeight >= window.innerWidth) {
    
        // 竖屏
    }else {
    
        // 横屏 
    }
}
detectOrient();
window.addEventListener('resize',detectOrient);