Different grid layout for portrait and Landscape i

Question

I am making an Android app using Sencha. I am using this layout for responsive layout in mobiles and tablets

<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>

Now i also want to specify a different grid layout when i switch from portrait to landscape mode .For example,in mobile screen, i want to use col-xs-6 in portrait mode and col-xs-3 in landscape mode. So how do i do that?

Answer 1

You can do your own class like this:

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

.col-xsl-6 is for landscape in mobile.

Answer 2

I've used this before for web apps, but I didn't get it working with Cordova/PhoneGap, so you'll have to test it with Sencha.

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

Had to dig out where I found it, but here is the original source: http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

Answer 3

I don't think this is easily possible. You would have to listen the "onRotationChange" event and then modify the classes of your divs.

Answer 4

Bootstrap plays with screen widths and heights and it cannot detect the orientation itself. According to [1] you could still achieve something by applying some of the larger layout options (small, medium) for the horizontal orientation and keep the smaller ones on vertical (I mean those sm and xs and so on).

Of course all depends on the set of devices in your mind: this solution may apply if the set of devices is limited and you can by trial and error find the best fit combination. Otherwise you need some javascript to detect the exact orientation, like @Nono pointed out in his answer. That solution needs some code, mine could work out of box, if right combination is found.

---

My source:

[1] customizing bootstrap columns in portrait orientation for mobile devices