Peau de bootstrap pour portrait mais spectacle pour paysage

Question

Disons que j'ai un ul avec 3 éléments li. Comment cacher les deux derniers éléments li en mode portrait et montrer les 3 quand vous êtes en mode paysage? Avec je pensais faire quelque chose comme CSS biensur et Bootstrap 3.

<div class="header-box pull-left"> 
    <ul> 
    <li class="usp"> 
    <a href="link" title="usp"> 
     <span class="usp-text">usp</span> 
    </a> 
    </li> 
    <li class="usp hide-for-xs"> 
    <a href="link" title="usp"> 
     <span class="usp-text">usp</span> 
    </a> 
    </li> 
    <li class="usp hide-for-xs"> 
    <a href="link" title="usp"> 
     <span class="usp-text">usp</span> 
    </a> 
    </li> 
    </ul> 
</div> 

:

.show-for-landscape{ 
display:block!important; 
} 

Mais comment le fait avec les requêtes des médias? Quel serait un bon réglage de la taille de l'écran, etc.?

Toutes les suggestions plus de bienvenue

Answer 1

Vous aurez probablement plus de chance avec une requête média qui cible l'orientation de l'appareil tels que:

@media screen and (max-device-width: 1000px) and (orientation:landscape){ 
    /*...your special rules for landscape...*/ 
} 

Je ne suis pas sûr du soutien global dans le mobile navigateurs pour la propriété d'orientation, mais je sais que cela fonctionne sur tous mes iOS actuels et mes navigateurs natifs Android Galaxy Note et S4. Ce que je sais avec certitude, c'est que cela ne ciblera que les appareils mobiles - les navigateurs de bureau l'ignorent complètement - ainsi, la propriété max-device-width définie sur 1000px affectera uniquement les appareils mobiles et n'aura aucun impact sur le bureau.

J'ai également utilisé ceci dans une application Web avec succès (pas Bootstrap). Vous aurez à tester:

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