Вопрос по android, android-layout – PhoneGap + Android + медиа-запросы

4

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

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

Я попробовал с: минимальная ширина, максимальная ширина, минимальная высота, максимальная высота, минимальная ширина устройства, максимальная ширина устройства, минимальная высота устройства, максимальная высота устройства, ориентация: портрет, ориентация: ландшафт, медиа = & quot; только экран и (max ... & quot ;, media = & quot; экран и (max ... & quot ;, media = & quot; (max .. & quot;)), все виды условных обозначений, все это не работает для всех резолюции и ориентации.

Это и пример:

<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

Ваш Ответ

2   ответа
2

используя 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
}

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

Error: User Rate Limit Exceeded Don Viegues
Error: User Rate Limit Exceeded Don Viegues
Error: User Rate Limit Exceeded Don Viegues
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Don Viegues
4

<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)"/>

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

Похожие вопросы