Android 如何在phonegap中使用媒体查询

我正在使用phonegap开发一个应用程序。我已经制作了与320 x 480分辨率屏幕兼容的应用程序。现在我使用媒体查询使其与480 x 800分辨率屏幕以及更高分辨率屏幕兼容，如下所示

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- style1 -->
<link rel="stylesheet" media="only screen and (min-width: 200px) and (max-width: 320px) and (orientation: portrait)" href="style.css">
<!-- style2 -->
<link rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait)" href="style2.css">
<!-- style3 -->
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait)" href="medium-style.css">

现在的问题是，当我在480x800分辨率屏幕上运行应用程序时，它使用的不是样式2，而是样式1。我还尝试使用单个样式表并删除视口。我也找不到任何与媒体查询相关的phonegap文档。请帮助您使用

html

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

css
/*240 - 320*/
@media (min-width: 320px) {
/*320 - 480*/
@media (min-width : 480px) {
/*480 - ...*/

....

//retina devices
@media only screen and (-webkit-min-device-pixel-ratio: 2.0)

html
css
/*240 - 320*/
@介质（最小宽度：320px）{
/*320 - 480*/
@介质（最小宽度：480px）{
/*480 - ...*/
....
//视网膜装置
@仅媒体屏幕和（-webkit最小设备像素比：2.0）

---

minwidth

首先是

Mobile

媒体查询。

你可以试试，而不是花几个小时在媒体查询上（由于Android版本的不同解释会产生冲突，还有很多其他的失望） 它为您完成扩展工作。您为一个设备开发，并让软件扩展css以匹配当前设备。实现只是一行程序

screengod(['path/to/my.css'],function(){
    /* do your app stuff */
});

---

它还修复了屏幕问题，比如在高dpi设备上获得320x480。此外，您的css（无媒体查询！）不仅适用于Android设备，也适用于所有iOS和windows设备，使您能够一次编写-部署到任何地方。

它不起作用。它只检测具有最高宽度的媒体查询。很抱歉，我把我弄糊涂了。它将是

min width

，我编辑了答案。仍然不起作用。它在web浏览器中正常工作，但没有avd中的t。这可能是avd的问题吗？请查看

设备像素比率，这可能会妨碍您的结果。