在phonegap中支持多种分辨率和密度的图像 [英] supporting multiple resolution and density of images in phonegap

问题描述

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

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

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

先谢谢我.

编辑的问题

我已经将以下代码用于 html

<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>

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

解决方案

然后通过jquery动态改变图片:

HTML:

<img id="app-icon" src="pictures/app_logo.png" display="inline"/>

Javascript:

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

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

HTML:

<span id="app-icon"></div><span id="品牌图标"></div>

CSS:

/* 低密度 (120)，mdpi */@media 屏幕和 (-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);}}/* 中等密度 (160), mdpi */@media 屏幕和 (-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);}}/* 高密度 (240), hdpi */@media 屏幕和 (-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);}}/* 超高密度 (320), xhdpi */@media 屏幕和 (-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);}}

如果要过滤，

ORIENTATION - 和(方向:横向)

设备宽度 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) {/* 你的风格在这里 */}

I am new to phonegap and facing a problem, I am making a phonegap app which will run on multiple platform devices of different screen size and different screen resolution so I have to load images of different resolution depending on screen resolution.

this can be achieved in android by simply putting your images of different resolution in hdpi, mdpi and ldpi folder and it(android) fetches images automatically depending on devices screen resolution. But how to do this in phonegap.

I have seen lot of articles on responsive web design they all say about positioning the elements on web page but non of them has told about how to place images on the basis of screen resolutions.

thanks i advance.

edited question

i have used following code for 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>

now I have images inside assets/www/pictures folder. this folder consists of 2 images of same resolution app_logo.png and company_logo.png and 2 images of higher resolution app_logo_big.png and company_logo_big.png now through media queries i will know the screen size and apply the styles but as far as i know i cannot change img src from css. So now how will i use these images of different resolution

解决方案

Then Dynamically Change Image through 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');  
  }
}

Through CSS: Use Media Queries for Different Resolution :

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); }
}

If you want to filter through,

ORIENTATION - and (orientation: landscape)

Device WIDTH and (min-device-width : 480px) and (max-device-width : 854px)

Example:

@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 */
}

这篇关于在phonegap中支持多种分辨率和密度的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！