Медиа-запросы не работают в браузере Android

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

Всего у меня есть 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»?


iphone android web-applications media-queries iphone-web-app
person jayfield1979    schedule 10.06.2011    source источник
comment
Веб-устройства часто не сообщают того, что вы от них ожидаете, и поэтому не реагируют на медиа-запросы так, как вы думаете. Возможно, было бы полезно указать вашим тестовым браузерам ckollars.org/dimensions-no -meta-viewport.html и ckollars.org/dimensions-meta-viewport .html и посмотрите, что они говорят.   -  person Chuck Kollars    schedule 29.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

person Bryant    schedule 18.07.2011

arrow_upward
0
arrow_downward

На Droid1 - размер вьюпорта 320 х 569.

person IgorGanapolsky    schedule 22.07.2011