如何在 phonegap 中使用媒体查询答案

【问题标题】：How to use media queries in phonegap如何在 phonegap 中使用媒体查询
【发布时间】：2015-08-09 22:18:58
【问题描述】：

我正在使用 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。我还尝试使用单个样式表并删除视口。我也找不到任何与 phonegap 相关的文档媒体查询。请帮助

【问题讨论】：

标签： android cordova media-queries

【解决方案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 媒体查询。

【讨论】：

它不工作。它只检测最大宽度的媒体查询
很抱歉让我感到困惑。应该是min-width，我编辑了答案。
仍然无法正常工作。它在网络浏览器中可以正常工作，但在 avd 中却不行。这可能是 avd 的问题吗？
查看device-pixel-ratio，这可能会影响您的结果。

【解决方案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 设备，使您能够一次编写 - 随处部署。

【讨论】：

屏神还能用吗