android - 如何在 phonegap 中使用媒体查询

Question

我正在使用 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">

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

Answer 1

你可以使用

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)

min-width 是为了Mobile First 媒体查询。