Как установить запросы на портрет и пейзаж в css?

Вот мой медиа-запрос:

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}

Но в планшете. Если он находится в ландшафтном режиме, этот div показывает

 .visible-tablet {
    display: inherit !important;
  }

Если он находится в портретном режиме, этот div показывает

.visible-phone {
    display: inherit !important;
  }

Я хочу, чтобы этот div .visible-tablet показывался всегда, когда я переключаю планшет на автоматический поворот (который будет для портретного и ландшафтного)

Но я использовал портретные и ландшафтные условия, но все же я столкнулся с этой проблемой. Любые комментарии?

Ответы

Ответ 1

iPad Media Queries (все поколения, включая iPad mini)

Благодаря тому, что Apple работает над созданием последовательного опыта для пользователей и простым временем для разработчиков, все 5 различных iPads (iPads 1-5 и iPad mini) могут быть нацелены только на один CSS-запрос. Следующие несколько строк кода должны работать идеально для гибкого дизайна.

iPad в портретной и альбомной ориентации

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad в ландшафте

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad в портрете

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3 и 4 Media Queries

Если вы хотите нацелить только iPad 3 Retina (или планшеты с аналогичным разрешением), чтобы добавить графику @2x или другие функции для дисплея Retina планшета, используйте следующие мультимедийные запросы.

Retina iPad в портретном и ландшафтном дизайне

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad в ландшафте

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}

Retina iPad в портрете

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }

IPad 1 и 2 медиа-запросов

Если вы хотите предоставить другую графику или выбрать другую типографику для iPad с более низким разрешением, медиа-запросы ниже будут работать как очарование вашего отзывчивого дизайна!

iPad 1 и 2 в портретной и альбомной ориентации

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}

iPad 1 и 2 в ландшафте

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */}

iPad 1 и 2 в портрете

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }

Источник: http://stephen.io/mediaqueries/

Ответ 2

Он также может быть таким же простым, как это.

@media (orientation: landscape) {

}