css media запросы не работают в ландшафтном режиме ipad

Question

У меня есть ipad, в котором я хочу применять медиа-запросы, когда он находится в альбомном режиме.Это то, что я пробовал (я пробовал оба варианта.):

Вариант 1:

/* iPads (landscape) ----------- */
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

Вариант 2:

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

Приведенные выше медиазапросы не работают, когда ipad находится в альбомном режиме.

В файле header.php я использую следующие мета-свойства:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>

Постановка проблемы:

Мне интересно, какие изменения мне следует сделатьсделать в мета-свойствах или в медиа-запросах выше , чтобы я мог применять медиа-запросы, когда ipad находится в альбомном режиме.

Answer 1

Я бы изменил ваш CSS на следующий код:

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

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