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

Question

我是手机上的新手并面临一个问题,我正在制作一个手机应用程序,它将在不同屏幕尺寸和不同屏幕分辨率的多个平台设备上运行,因此我必须根据屏幕分辨率加载不同分辨率的图像.

这可以通过简单地将你的不同分辨率的图像放在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.那么现在我将如何使用这些不同分辨率的图像

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>

使用Javascript:

$(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 */
}