Determine the best implementation of horizontal and vertical screens

1、CSS Media Queries

1. inline style

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

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

2. Outreach style

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

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

3.window.matchMedia()

var mql = window.matchMedia("(orientation: portrait)");
function onMatchMeidaChange(mql){
    
    if(mql.matches) {
    
        //  Vertical screen 
    }else {
    
        //  Horizontal screen 
    }
}
onMatchMeidaChange(mql);
mql.addListener(onMatchMeidaChange);

4.window.innerHeight/window.innerWidth

function detectOrient(){
    
    if(window.innerHeight >= window.innerWidth) {
    
        //  Vertical screen 
    }else {
    
        //  Horizontal screen  
    }
}
detectOrient();
window.addEventListener('resize',detectOrient);