Question

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

<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.I也尝试使用单个样式表并删除视口。我也无法找到任何相关的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媒体查询。

Answer 2

您可以尝试https://github.com/biodiv/cordova-screengod而不是花费数小时进行媒体查询（由于Android版本的不同解释而存在冲突，以及更多其他失望）它为你做扩展的工作。您为一台设备开发并让软件扩展您的css以匹配当前设备。实施只是一次性的

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

它还修复了在高dpi设备上获取320x480等屏幕问题。此外，您的css（没有媒体查询！）不仅适用于Android设备，而且适用于所有iOS和Windows设备，使您可以编写一次 - 在任何地方部署。

如何在phonegap中使用媒体查询

2 个答案: