Comment puis-je demander à l'utilisateur de faire pivoter l'appareil si dans un certain mode paysage ou portrait, semblable à GameInformer App

J'ai un site qui est optimisé pour un affichage en mode Paysage. Comment puis-je donc, si l'utilisateur charge le site web en mode paysage c'est bien, mais si il charge en mode Portrait ou ils tournent du mode Paysage au mode Portrait, une image ou quelque chose de popups jusqu'à la prise de la totalité de l'écran en leur demandant de tourner le dos au paysage? La pensée Javascript/jQuery peuvent le faire.

Je l'ai vu faire sur mon iPad avec la Game Informer application, où si l'utilisateur ouvre l'application en mode Portrait ou tourne de Paysage à Portrait une image opaque apparaît pour vous demander tourner le dos au paysage. [voir iPad capture d'écran]
Comment puis-je demander à l'utilisateur de faire pivoter l'appareil si dans un certain mode paysage ou portrait, semblable à GameInformer App

Sujet peut-être obsolète, mais pourrait être utile de regarder ici lien
Je ne comprends pas que vous avez des commentaires: ce qui rend ce sujet obsolète? Il est actuellement pertinente pour moi, et le lien que vous avez fourni à pleaserotate.js semble être la solution la plus simple pour mes besoins... (Merci!)

OriginalL'auteur SuperDistros | 2013-07-31

  1. 19

    Au lieu de jQuery/JS vous pouvez utiliser les CSS avec un style div conteneur au lieu de cela, qui est affichée uniquement lorsque l'appareil est en mode portrait.

    Vous pouvez prendre l'orientation d'une requête de média

    Exemple: 

    /* for all screens */
#info {display: none;}

/* only when orientation is in portrait mode */
@media all and (orientation:portrait) {
    #info {
         display: block;
    }
}
    fonctionne bien merci! @mhauri

    OriginalL'auteur Marcel Hauri

  2. 2

    Je vois que vous marqués à la question de la responsive-design donc pensé que je pouvais offrir une solution qui ne nécessite pas de Javascript et peut être fait avec seulement CSS.

    Sachant qu'il y a deux différentes tailles d'écran disponibles lors de la commutation entre le mode paysage et portrait, vous pouvez utiliser une requête de média pour afficher et masquer un overlay:

    HTML:

    <div id="content">
    <p>Integer velit nulla, condimentum vitae risus ut, rhoncus vulputate quam. Fusce lacus elit, accumsan eu dolor vel, scelerisque pretium turpis. Vivamus ac lectus vitae enim lacinia fringilla vel id tellus. Curabitur pharetra tortor eget risus ornare scelerisque. Morbi tempus et felis vitae venenatis. Suspendisse vitae ultrices est, nec sagittis arcu.</p>
</div>

    CSS:

    #rotate {
    display: none;
}

@media screen and (max-width: 300px) {
    #rotate {
        background-color: rgba(0,0,0,0.5);
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

    Tout cela n'est de vérifier la largeur disponible et si c'est 300px ou moins, il affichera le contenu des superpositions. Si la largeur est plus grande que 300px, il permet de masquer le contenu. Vous pouvez ajuster cette valeur pour la largeur de l'appareil mobile pour vérifier si il est en mode portrait ou paysage.

    Vous pouvez le tester sur jsfiddle en déplaçant la barre verticale dans le milieu pour faire la fenêtre d'aperçu plus grands et des petits: http://jsfiddle.net/wv6Vp/

    Qui n'affiche qu'une rotation de la boîte pour les écrans plus petits que 300px. Mon iPad est 768px large dans le portrait de sorte qu'il ne serait pas montrer la rotation de l'info, qui est ce que @kevinorin demandé. Votre solution est toutefois préférable de masquer les écrans sont trop petits pour le contenu, étant donné que l'iPhone en mode paysage montrera une page qu'un iPad en mode portrait ne serait pas avec la manière qu'il le demande.
    ouais, c'était juste un exemple pour aider à kevinorin, je l'ai dit dans ma réponse que les valeurs peuvent être ajustées et je l'ai inclus dans ce cas, il devait être appliqué à différentes largeurs... cela dit, je ne savais pas qu'il était un media query pour des orientations différentes si l'on a accepté la réponse est mieux sur la mienne.

    OriginalL'auteur cchana