支持 phonegap 中的多种分辨率和图像密度

Question

我是 phonegap 的新手，遇到了一个问题，我正在制作一个 phonegap 应用程序，它将在不同屏幕尺寸和不同屏幕分辨率的多个平台设备上运行，所以我必须根据屏幕分辨率加载不同分辨率的图像。

这可以在 android 中实现，只需将不同分辨率的图像放在 hdpi、mdpi 和 ldpi 文件夹中，它（android）会根据设备屏幕分辨率自动获取图像。但是如何在 phonegap 中做到这一点。

我看过很多关于响应式网页设计的文章，他们都谈到了在网页上定位元素，但没有一篇谈到如何根据屏幕分辨率放置图像。

谢谢我提前。

编辑的问题

我为 html 使用了以下代码

<div id="header" data-role="header" data-position="fixed">
 <img alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left" />
 <img alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right" /><h1></h1>
</div>

现在我在 assets/www/pictures 文件夹中有图像。此文件夹包含 2 个相同分辨率的图像 app_logo.png 和 company_logo.png 以及 2 个更高分辨率的图像 app_logo_big.png 和 company_logo_big.png 现在通过媒体查询我将知道屏幕尺寸并应用样式但据我所知我无法从 css 更改 img src。那么现在我将如何使用这些不同分辨率的图像

原文由 prateek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

然后通过 jquery 动态更改图像：

HTML:

 <div id="header" data-role="header" data-position="fixed">
   <img id="app-icon" src="pictures/app_logo.png" display="inline" />
</div>

Java脚本：

 $(document).ready(function () {
  if(window.devicePixelRatio == 0.75) {
     $("#app-icon").attr('src', '/images/lpdi/app-icon.png');
  }
  else if(window.devicePixelRatio == 1) {
           $("#app-icon").attr('src', '/images/mdi/app-icon.png');
  }
  else if(window.devicePixelRatio == 1.5) {
     $("#app-icon").attr('src', '/images/hpdi/app-icon.png');
  }
  else if(window.devicePixelRatio == 2) {
              $("#app-icon").attr('src', '/images/xpdi/app-icon.png');
  }
}

通过 CSS：使用不同分辨率的媒体查询：

HTML:

 <div id="header" data-role="header" data-position="fixed">
    <span id="app-icon"></div>
    <span id="brand-icon"></div>
</div>

CSS：

 /* Low density (120), mdpi */
@media screen and (-webkit-device-pixel-ratio: 0.75) {
   #app-icon { background-image:url(pictures/ldpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/ldpi/brand-icon.png); }
}

/* Medium density (160), mdpi */
@media screen and (-webkit-device-pixel-ratio: 1) {
   #app-icon { background-image:url(pictures/mpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/mdpi/brand-icon.png); }
}

/* High density (240), hdpi */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
   #app-icon { background-image:url(pictures/hdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/hdpi/brand-icon.png); }
}

/* Extra high density (320), xhdpi */
@media screen and (-webkit-device-pixel-ratio: 2) {
   #app-icon { background-image:url(pictures/xdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/xdpi/brand-icon.png); }
}

如果你想过滤，

方向 - and (orientation: landscape)

设备宽度 and (min-device-width : 480px) and (max-device-width : 854px)

例子：

 @media screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width : 640px) and (max-device-width : 960px) and (orientation: landscape) {
   /* Your style here */
}

原文由 Rishi Php 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您也可以使用 handlebars helper 来执行此操作，它的代码密集度较低，在我看来是推荐的方法：

 if (screen.width <= 480) {
    imgFolder = 'img/low/';
}
else {
    imgFolder = 'img/high/';
}

Handlebars.registerHelper('imgFolder', function () {
    return imgFolder
});

而 img/low/ 和 img/high 包含具有相同名称的不同分辨率的图像。

然后在你的模板中：

 <img src="{{imgFolder}}yourImage.png" />

当然，您必须根据应用程序的目标设备设置屏幕尺寸值。

附录： 如果您在 cordova 浏览器中没有 1:1 像素映射（不推荐 - 您的图像将具有模糊/不清晰的外观） screen.width 将与浏览器宽度（window.innerWidth）和你不同必须使用 $(window).width() 或 window.innerWidth 。您可以使用媒体查询修复错误的映射。

原文由 biodiv 发布，翻译遵循 CC BY-SA 3.0 许可协议