медиа-запрос не работает для iphone 5 landscape

Question

Я использую медиа-запросы для простого изменения цвета фона, и он не работает на iphone 5. Я не уверен, что мои запросы ошибочны или нет, но вот мой мета-тег:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 

и вот мои медиа-запросы:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
    .loginPage 
    { 
     background: red !important; 
    } 
} 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { 
    .loginPage 
    { 
     background: green !important; 
    } 

}

красный фон работает, но когда я поворачиваю мое устройство фон не изменится на зеленый. любая помощь будет оценена по достоинству.

Answer 1

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

Вы можете попробовать увеличить максимальную ширину ландшафта до 1136 пикселей, которая должна быть шириной iPhone 5 в ландшафтном режиме. Если это не сработает, я бы рекомендовал увеличить размер максимальной ширины до безумного большого числа и проделать свой путь, чтобы устранить проблему.