recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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.

PHPzPHPz2775 Il y a quelques jours923

répondre à tous(2)je répondrai

  • 伊谢尔伦

    伊谢尔伦2017-05-19 10:23:44

    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.

    répondre
    0
  • PHPz

    PHPz2017-05-19 10:23:44

    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.

    répondre
    0
  • Annulerrépondre