PhoneGap + Android +媒體查詢

我一直在爲此奮鬥了一個星期。我已經閱讀了大量的帖子/網頁/技巧&技巧，但我無法弄清楚這一點。PhoneGap + Android +媒體查詢

我需要爲不同的屏幕尺寸和方向設置CSS規則。但承認它不起作用。我試過：最小寬度，最大寬度，最小高度，最大高度，最小設備寬度，最大設備寬度，最小設備高度，最大設備高度，最大設備寬度，最大設備寬度，最大設備寬度，方向：縱向，方向：風景，媒體=「僅屏幕和（最大...」，媒體=「屏幕和（最大...」，媒體=「（最大..」），所有類型的流程，沒有這適用於所有的分辨率和方向

這是和示例：？

<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

來源

2012-05-07 Don Viegues

看起來是這樣工作的

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

它就好像創造套不同，它不是在所有

來源

2012-05-08 13:50:17

您是否嘗試過使用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 
}

Link for reference。

來源

2012-05-07 16:36:34 nycynik

嗨重疊決議的，我愛你的測試，我將是巨大的，知道什麼是但它看起來像Android不支持它：05-07 16：45：15.179：E/Web控制檯（2412）：TypeError：表達式結果'window.matchMedia'[undefined]不是函數。在file：///android_asset/www/index.html：36 –

我使用這個視口： –

我想我已經解決了它。看起來我應該創建一組不相互重疊的分辨率。 –

PhoneGap + Android +媒體查詢

回答

相關問題