Bootstrap hide for portrait but show for landscape

Question

Let's say I have an ul with 3 li elements. How do you hide the last two li elements when in portrait mode and show all 3 when you are in landscape mode? With CSS offcourse and 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>

I thought do something like:

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

But how does this work with media queries? What would be a good setting of screen size etc?

Any suggestions more then welcome

Answer 1

You'll probably have more luck with a media query that targets the device orientation such as:

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

I'm not sure about the overall support in mobile browsers for the orientation property, but I know it works on all of my current iOS and my Android Galaxy Note and S4 native browsers. What I do know for sure is that this will only target mobile devices -- desktop browsers ignore it completely -- so, the max-device-width property set to 1000px will safely affect only mobile devices and have no impact when viewed on desktop.

I have also used this in a web app successfully (not Bootstrap). You'll have to test:

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