Различные макеты сетки для портрета и Пейзаж в бутстрапе

Я делаю Android-приложение с помощью Sencha. Я использую этот макет для гибкой компоновки в мобильных телефонах и планшетах

.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Теперь я также хочу указать другую схему сетки, когда я переключаюсь из портретного в альбомный. Например, на мобильном экране я хочу использовать col-xs-6 в портретном режиме и col-xs-3 в альбомном режиме. Итак, как мне это сделать?

Я использовал это раньше для веб-приложений, но у меня не получилось работать с Cordova / PhoneGap, поэтому вам придется протестировать его с Sencha.

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

Пришлось выкапывать, где я его нашел, но вот исходный источник: http://abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/

Вы можете сделать свой собственный class следующим образом:

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

.col-xs l -6 для пейзажа в мобильном телефоне.

Bootstrap играет с шириной и высотой экрана и не может определить ориентацию. Согласно [1], вы все еще можете достичь чего-то, применив некоторые из более крупных вариантов макета (малые, средние) для горизонтальной ориентации и сохраните меньшие по вертикали (я имею в виду те sm и xs и т. Д.).

Конечно, все зависит от множества устройств в вашем сознании: это решение может применяться, если набор устройств ограничен, и вы можете путем проб и ошибок найти наилучшую комбинацию. В противном случае вам нужен javascript, чтобы определить точную ориентацию, например, @Nono указал в его ответе. Это решение нуждается в некотором коде, мой может работать из коробки, если будет найдена правильная комбинация.


Мой источник:

[1] настройка столбцов начальной загрузки в портретной ориентации для мобильных устройств

Я не думаю, что это легко. Вам нужно будет прослушать событие onRotationChange, а затем изменить classы ваших div.