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

Question

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

@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; 
    } 
} 

Но в таблетках, если он находится в ландшафтном режиме, это ДИВ показывает

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

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

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

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

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

Answer 1

IPad медиазапросы (Все поколения - в том числе IPad мини)

Благодаря работе компании Apple в создании последовательной работы пользователей, а также легкое время для разработчиков, все 5 различных IPADS (IPADS 1-5 и IPad мини) могут быть нацелены только на один 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

Если вы хотите, чтобы предназначаться только 3-го и 4-го поколения Retina IPADS (или таблетки с подобным разрешением), чтобы добавить @ 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 Media Queries

Если вы хотите, чтобы поставить различные графики или выбрать другую типографию для более низкого разрешения экрана 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/

Answer 2

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

@media (orientation: landscape) { 

}