PhoneGap + Android + media queries
android, android-layout, cordova, media-queries
Solution
It looks like it works this way
<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)"/>
It is like creating different sets of resolutions that does NOT overlap at all
Problem
I have been struggling with this for a week now. I have read tons of posts/webs/tips&tricks, but I just can't figure this out. I need to set CSS rules for different screen sizes and orientations. But the recognition it's not working. I have tryed with: min-width, max-width, min-height, max-height, min-device-width, max-device-width, min-device-height, max-device-height, orientation: portrait, orientation: landscape, media="only screen and (max...", media="screen and (max...", media="(max.."), all kind of convinations, none of this works for all the resolutions and orientations. This is and example: ``` <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)"/> ``` How can I address this problem? Thanks dhcmega