разжечь огонь @media

Question

Я пытаюсь создать электронное письмо, которое будет отображаться уникальным образом в родном почтовом клиенте Kindle Fire.Я могу получить исходное горизонтальное изображение с помощью следующего медиазапроса:

@media only screen and (min-device-width: 590px) and (max-device-width:1014px){
/*kindle*/
    #desktop { display:none}
    #kindle { display:block !important}
}                           

...

<div class="mobile" id="kindle" style="display:none">Kindle Fire</div>
<div id="desktop">This is the desktop view</div>

Проблема заключается в том, что при повороте устройства в альбомную ориентациюМедиа-запрос теряется, когда я поворачиваю его назад, он все еще теряется.Я попытался использовать условное выражение ориентации, но это, похоже, не работает вообще.У кого-нибудь есть предложения?

Answer 1

для CSS на основе ориентации просто используйте min-width или min-height.Не используйте «устройство».Это то, что скрывает тебя.Запросы устройства не обнаруживают изменения ориентации.

Answer 2

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

/** Kindle Fire Landscape **/
@media only screen and (min-device-width : 600px) and (max-device-width: 1280px) {

}