javascript - Comment afficher une page Web directement en mode paysage sur un téléphone mobile?

Question

La page Web est conçue pour les téléphones mobiles avec écran horizontal. Si la page est affichée sur un écran vertical, la page sera gâchée.

Answer 1

Peut juger puis inviter l'utilisateur à faire une rotation

if(window.orientation==90||window.orientation==-90){
    alert("横屏状态！")
}

Ou écoutez les événements de rotation

window.onorientationchange = function(){ 
    switch(window.orientation){ 
        case -90: 
        case 90: 
            alert("横屏:" + window.orientation);
        case 0: 
        case 180: 
             alert("竖屏:" + window.orientation);
        break; 
    } 
} 

La requête multimédia CSS peut également être jugée

@media (orientation: portrait) { } 横屏 @media (orientation: landscape) { }竖屏 

Mais il existe encore une solution :
Lors de l'ouverture de la page, vous pouvez utiliser window.orientation pour déterminer si la page Web est horizontale ou verticale. Si elle est verticale, ajoutez des styles à la page entière

.

transform: rotate(90deg);

De cette façon, votre page affichera l'effet d'écran horizontal.

Answer 2

Le frontal ne peut pas contrôler l'écran horizontal et vertical du téléphone mobile, mais il peut être jugé à l'aide des conditions CSS :

Portrait :

@media screen and (orientation:portrait){
    #wrap{
        display:none;
    }
}

Paysage :

@media screen and (orientation:landscape){
    #wrap{
        display:block;
    }
}

Par exemple, lorsque l'écran est vertical, le texte d'invite s'affiche : Veuillez naviguer horizontalement.
Utilisez l'opération CSS pour afficher et masquer après l'écran horizontal.