Puis-je déclencher un CSS événement dans le navigateur safari mobile sur iphone changement d'orientation?

Je suis à essayer de comprendre comment modifier une page web intégrée lorsque l'utilisateur fait pivoter son téléphone en mode portrait ou paysage - essentiellement à la charge d'un point de vue qui est le mieux adapté pour le format d'écran plus grand. Est-ce possible de le faire sans faire appel à une nouvelle page à partir du serveur, c'est à dire le lecteur de l'intérieur CSS/Javascript lui-même?

Merci!

InformationsquelleAutor tbacos | 2010-02-22
  1. 19

    Vous pouvez utiliser le window.orientation de la propriété. Sa valeur est le degré que le mode d'affichage est utilisé. Voici un bref exemple: 

    function updateOrientation()
{   
    var orientation=window.orientation;
    switch(orientation)
    {

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

    Vous pouvez utiliser cette fonction sur cet événement:

    window.onorientationchange=updateOrientation;

    Espère que ça aide!

    InformationsquelleAutor anthares
  2. 7

    Préférable de ne pas définir la onorientationchange directement la propriété. Utilisez plutôt la commande suivante:

    window.addEventListener('orientationchange', function (evt) {
    switch(window.orientation) {
        case 0: //portrait
        case 180: //portrait
        case 90: //landscape
        case -90: //landscape
    }
}, false);
    • C'est certainement plus correct que l'on a accepté la réponse.
    InformationsquelleAutor Andrew Hedges
  3. 5

    Je ne peux pas croire que personne n'a parlé de la css décision:

    @media screen and (max-width: 320px) //Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}

@media screen and (min-width: 321px) //Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}
    InformationsquelleAutor Itai Sagi
  4. 5

    Le Safari navigateur mobile dispose d'un support pour le orientationchange de l'événement ainsi que la orientation bien sur la fenêtre, de sorte que vous pouvez faire quelque chose comme:

    window.onorientationchange = function() {
    switch(window.orientation) {
        case 0:   //Portrait
        case 180: //Upside-down Portrait
            //Javascript to setup Portrait view
            break;
        case -90: //Landscape: turned 90 degrees counter-clockwise
        case 90:  //Landscape: turned 90 degrees clockwise
            //Javascript to steup Landscape view
            break;
    }
}

    Je voudrais ajouter le à l'envers parce que l'iPad human interface guidelines dire que vous devriez soutenir tous orientations, donc je m'attends Safari sur l'iPad (et éventuellement futures versions iPhone) à l'appui.

    InformationsquelleAutor Ben S
  5. 0

    Safari Mobile prend en charge des activités d'orientation.

    InformationsquelleAutor Giao
  6. 0
    <body onorientationchange="updateOrientation();">

    À partir de: Safari De Contenu Web Guide

    InformationsquelleAutor jessecurry