支持手机图像的多重分辨率和密度 [英] supporting multiple resolution and density of images in phonegap
问题描述
这可以在android通过简单地把你的图像不同的分辨率在hdpi，mdpi和ldpi文件夹中实现，它（Android）根据设备屏幕分辨率自动获取图像。但是如何在phonegap这样做。
我已经看到很多关于响应式网页设计的文章，他们都说关于在网页上的元素定位，但没有他们告诉如何根据屏幕分辨率放置图片。
感谢我提前。
编辑的问题
我为html使用了以下代码
< div id =header data-role =headerdata-position =fixed>
< img alt =app_iconsrc =pictures / app_logo.pngdisplay =inlineclass =align-left/>
< img alt =brand_iconsrc =pictures / company_logo.pngdisplay =inlineclass =align-right/>< h1>< / h1>
< / div>
现在我有assets / www / pictures文件夹里面的图片。这个文件夹由2个图像相同的分辨率app_logo.png和company_logo.png和2更高分辨率的图像app_logo_big.png和company_logo_big.png现在通过媒体查询我会知道屏幕尺寸和应用样式，但据我所知i不能从css更改img src。现在我将如何使用这些不同分辨率的图片
然后通过jquery动态更改图片：
HTML：
div id =headerdata-role =headerdata-position =fixed>
< img id =app-iconsrc =pictures / app_logo.pngdisplay =inline/>
< / div>
Javascript： b
$ b
$（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 = headerdata-role =headerdata-position =fixed>CSS b
< span id =app-icon>< / div>
< span id = -icon>< / div>
< / div>
$ b/ *低密度（120），mdpi * /
@media屏幕和（-webkit-设备像素比：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-设备像素比率：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-设备像素比：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-设备像素比：2）{
＃app-icon {background-image：url（pictures / xdpi / app-icon.png）; }
＃brand-icon {background-image：url（图片/ xdpi / brand-icon.png）; }
}
如果要过滤，
ORIENTATION -
和（orientation：landscape）
装置WIDTH
和（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 */ }
这篇关于支持手机图像的多重分辨率和密度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
