Différentes de la grille de mise en page pour une orientation portrait et Paysage dans le bootstrap

Je fais une application Android à l'aide de Sencha.
Je suis à l'aide de cette disposition pour répondre disposition dans les mobiles et les tablettes

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-4</div>
</div>

Maintenant je tiens aussi à préciser une autre grille de mise en page quand je passe du mode portrait au mode paysage .Par exemple,dans l'écran de mobile, je veux utiliser col-xs-6 en mode portrait et le col-xs-3 en mode paysage. Alors, comment dois-je faire?

OriginalL'auteur Diffy | 2014-05-04

  1. 5

    J'ai utilisé ce avant pour les applications web, mais je n'ai pas de travail avec Cordova/PhoneGap, de sorte que vous aurez à tester avec Sencha. 

    @media screen and (min-aspect-ratio: 13/9){ } //landscape and 
@media screen and (max-aspect-ratio: 13/9){ } //portrait.

    Dû creuser où je l'ai trouvé, mais voici la source originale: http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

    OriginalL'auteur jme11

  2. 4

    Vous pouvez faire votre propre classe comme ceci:

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .col-xsl-6{ width: 50%; }
}

    .col-xsl-6 est pour le paysage mobile.

    OriginalL'auteur Aztrozero

  3. 1

    Bootstrap joue avec écran largeurs et hauteurs, et il ne peut pas détecter l'orientation elle-même. Selon [1] vous pouvez toujours obtenir quelque chose par l'application de certaines des plus grandes options de mise en page (petite, moyenne) pour l'orientation horizontale et de garder les plus petits sur la verticale (je parle de ceux sm et xs et ainsi de suite).

    Bien sûr, tout dépend de l'ensemble des appareils dans votre esprit: cette solution peut s'appliquer si l'ensemble des appareils est limité et vous pouvez par essais et erreurs de trouver le meilleur ajustement de la combinaison. Sinon vous avez besoin d'un peu de javascript pour détecter l'orientation exacte, comme @Nono l'a souligné dans sa réponse. Cette solution nécessite un peu de code, la mine pourrait fonctionner hors de la boîte, si la combinaison est trouvé.

    Ma source:

    [1] personnalisation de bootstrap colonnes en orientation portrait pour les appareils mobiles

    OriginalL'auteur mico

  4. -1

    Je ne pense pas que cela est facilement réalisable.
    Vous devez écouter le "onRotationChange" de l'événement et ensuite modifier les classes de votre divs.

    OriginalL'auteur Nono