PhoneGap + Android + медиа-запросы

Я уже неделю борюсь с этим. Я прочитал массу сообщений / веб-сайтов / советов и приемов, но я просто не могу этого понять.

Мне нужно установить правила CSS для разных размеров экрана и ориентации. Но с распознаванием это не работает.

Я пробовал: min-width, max-width, min-height, max-height, min-device-width, max-device-width, min-device-height, max-device-height, ориентация: портрет, ориентация : landscape, media = "только экран и (max ...", media = "screen and (max ...", media = "(max .."), всевозможные убеждения, ничего из этого не работает для всех разрешения и ориентации.

Это и пример:

<link rel="stylesheet" href="css/iscroll.css" />
<link rel="stylesheet" href="css/iscroll_600.css"  type="text/css" media="only screen and (max-width: 600px) and (max-height: 1024px) and (orientation: portrait)"/>    
<link rel="stylesheet" href="css/iscroll_600.css"  type="text/css" media="only screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape)"/> 
<link rel="stylesheet" href="css/iscroll_1280.css" type="text/css" media="only screen and (max-width: 800px) and (max-height: 1280px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/iscroll_1280.css" type="text/css" media="only screen and (max-width: 1280px) and (max-height: 800px) and (orientation: landscape)"/>

Как я могу решить эту проблему? Спасибо

dhcmega


android cordova android-layout media-queries
person Don Viegues    schedule 07.05.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Похоже, так работает

<link rel="stylesheet" href="css/style_default.css" />
<link rel="stylesheet" href="css/style320.css" media="(min-width: 241px) and (max-width: 320px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style480.css" media="(min-width: 321px) and (max-width: 480px) and (orientation: portrait)"/>  
<link rel="stylesheet" href="css/style540.css" media="(min-width: 481px) and (max-width: 540px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style600.css" media="(min-width: 541px) and (max-width: 600px) and (orientation: portrait)"/>  
<link rel="stylesheet" href="css/style1280.css" media="(min-width: 601px) and (max-width: 800px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style1536.css" media="(min-width: 801px) and (max-width: 1152px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style320.css" media="(min-width: 321px) and (max-width: 480px) and (orientation: landscape)"/>
<link rel="stylesheet" href="css/style480.css" media="(min-width: 481px) and (max-width: 800px) and (orientation: landscape)"/>  
<link rel="stylesheet" href="css/style540.css" media="(min-width: 801px) and (max-width: 960px) and (orientation: landscape)"/>    
<link rel="stylesheet" href="css/style600.css" media="(min-width: 961px) and (max-width: 1024px) and (orientation: landscape)"/> 
<link rel="stylesheet" href="css/style1280.css" media="(min-width: 1025px) and (max-width: 1280px) and (orientation: landscape)"/>    
<link rel="stylesheet" href="css/style1536.css" media="(min-width: 1281px) and (max-width: 1536px) and (orientation: landscape)"/>

Это похоже на создание разных наборов разрешений, которые вообще НЕ перекрываются.

person Don Viegues    schedule 08.05.2012

arrow_upward
2
arrow_downward

Вы пробовали использовать javascript, чтобы увидеть, что возвращается медиа-запросом, чтобы проверить результаты?

var mq = window.matchMedia( "only screen and (max-width: 600px) and (max-height: 1024px) and (orientation: portrait)" );  

if (mq.matches) {
    // window width is exactly 600x1024 and portrait
}
else {
    // window width is exactly 600x1024 and portrait
}

Ссылка для справки.

person nycynik    schedule 07.05.2012
comment
Привет, мне понравился ваш тест, было бы здорово узнать, что происходит, но похоже, что Android его не поддерживает: 05-07 16: 45: 15.179: E / Web Console (2412): TypeError: Result of expression ' window.matchMedia '[undefined] не является функцией. в файле: ///android_asset/www/index.html: 36 - person Don Viegues; 07.05.2012
comment
Я использую это окно просмотра: ‹meta name = viewport content = user-scaleable = no, width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, target-densityDpi = device-dpi / › - person Don Viegues; 07.05.2012
comment
Думаю, я решил это. Похоже, я должен создать наборы разрешений, которые вообще НЕ перекрывают друг друга. - person Don Viegues; 07.05.2012
comment
ой! ну, это наводит меня на мысль, что он загрузит 2 файла css, но это звучит разумно. Удачи! - person nycynik; 07.05.2012
comment
Да, это работает. Но не нравится. Я вставлю все это как автоматический ответ через 8 часов, необходимых для stackoverflow. - person Don Viegues; 08.05.2012