Сбой медиазапросов в браузере Android

Question

Я пытаюсь разработать веб-приложение, которое применяет соответствующую таблицу стилей в зависимости от устройства (и его ориентации).

Всего у меня 5 медиа-запросов:

//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">

//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">

//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">

//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">

//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">  

Все работает на рабочем столе, iPad и iPhone (как в браузере, так и в версии веб-приложения), но в браузере Android происходит сбой запроса мультимедиа? Есть идеи? Я неправильно понял 'max-device-width'?

Answer 1

Это связано с тем, что большинство новых android-телефонов имеют ширину 480 на 800 в зависимости от устройства, поэтому, как вы пишете, Android Landscape должен подобрать планшетный ландшафт css. Но я думаю, что столкнулся с аналогичной проблемой, когда Android не брал таблицу стилей, поэтому я добавил это, и все, похоже, работало ...

<meta name="viewport" content="width=device-width"> 

Есть ли у вас это в голове над ссылками таблицы стилей?

Answer 2

на Droid1 - размер области просмотра составляет 320 x 569.