CSS responsive design - détecter un affichage en mode portrait

Je sais que c'est avec de la pure CSS possible d'adapter la feuille de style selon les dimensions de l'écran, comme ceci:

@media (max-width: 959px) {
  /* styles for smallest viewport widths */
}

@media (min-width: 600px) and (max-width: 959px) {
  /* styles for mid-tier viewport widths */
}

@media (min-width: 960px) {
  /* original CSS styles */
}

(source)

Est-il avec pur css possible de vérifier sur un paysage ou portrait d'affichage?

OriginalL'auteur Keelan | 2013-05-04

  1. 11

    Oui, à l'aide de la syntaxe suivante:

    @media all and (orientation: landscape) {}

    Voir le w3 specs pour plus d'informations.

    Merci! Petite question complémentaire: ce qui va se passer quand quelqu'un s'incline son écran de téléphone, de sorte que les changements d'orientation? Sera appliquée CSS changement?
    Je n'ai pas vérifié moi-même, mais je suis à peu près certain que c'est le cas depuis d'autres requêtes de médias (tels et la largeur de l'écran) sont re-vérifié.
    Ok, merci pour tout cela!

    OriginalL'auteur mogelbrod

  2. 3

    Vous pouvez utiliser orientation:

    @media all and (max-width: 959px) and (orientation : portrait) {
    /* Styles */
}

    OriginalL'auteur Eli

  3. 2

    De w3:

    @media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

    OriginalL'auteur Vucko

  4. 0

    Toutes les réponses sont incorrectes. Android le fera passer du mode portrait au mode paysage lorsque le clavier est affiché.

    Différents claviers aussi besoin de tests comme ils peuvent prendre jusqu'à plus d'espace vertical. Swift clavier prend plus d'espace vertical, de sorte que vous ne pouvez pas utiliser des solutions comme @media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */} comme cela échouera sur beaucoup de téléphones.

    La seule solution est d'utiliser javascript.

    Sur les nouveaux appareils Android, vous pouvez tester et d'utiliser la nouvelle fenêtre.de l'écran.l'orientation de l'api.

    Sur iOS, vous pouvez utiliser la fenêtre.l'orientation qui fonctionne très bien. ie Math.abs( window.orientation ) === 90 est paysage

    Et de secours, vous pouvez utiliser window.screen.width > window.screen.height qui permettra de couvrir de très vieux appareils Android qui ne prennent pas en charge la nouvelle fenêtre.de l'écran.l'orientation de l'api

    Puis tout ce que vous devez faire est d'ajouter /supprimer une classe sur redimensionner /orientationchange événements.

    /* Android Orientation */
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation || null;

    /* Check */
    if ( orientation && orientation.type ) {

        /* Landscape */
        if ( orientation.type === 'landscape' || orientation.type === 'landscape-primary' || orientation.type === 'landscape-secondary' ) {
            return 'landscape';

        /* Portrait */
        } else {                                
            return 'portrait';
        }

    }
    Pouvez-vous veuillez donner quelques exemples de recherche à l'appui de votre réponse?
    Voici les questions sur les points d'arrêt de tir lorsque le clavier apparaît. stackoverflow.com/questions/8883163/...
    Je n'ai pas besoin de fournir de la recherche. Lorsque le clavier affiche sur Android, la fenêtre est redimensionnée. Cela signifie des points d'arrêt va changer.
    Mais vous n'avez tout simplement.. Vous avez fourni un exemple dans le code alors que dans l'original de votre post, vous n'en avait pas. Droit?
    La réponse a propos de la communication de la recherche sur la webview Android redimensionnement lorsque le clavier est affiché. J'ai ajouté un lien montrant d'autres reconnaissance de la question. Désolé, je ne savais pas que c'était après votre message d'origine. L'exemple, j'ai juste ajouté était juste pour empêcher d'autres personnes d'avoir à rechercher un Android solution.

    OriginalL'auteur Matt