Html 在phonegap中支持多种分辨率和密度的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12177134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
supporting multiple resolution and density of images in phonegap
提问by prateek
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.
我是 phonegap 的新手并面临一个问题，我正在制作一个 phonegap 应用程序，它将在不同屏幕尺寸和不同屏幕分辨率的多个平台设备上运行，因此我必须根据屏幕分辨率加载不同分辨率的图像。
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.
这可以在 android 中通过简单地将不同分辨率的图像放在 hdpi、mdpi 和 ldpi 文件夹中来实现，it(android) 会根据设备屏幕分辨率自动获取图像。但是如何在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
我已将以下代码用于 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
现在我在 assets/www/pictures 文件夹中有图像。该文件夹由 2 张相同分辨率的 app_logo.png 和 company_logo.png 图像以及 2 张更高分辨率的 app_logo_big.png 和 company_logo_big.png 图像组成，现在通过媒体查询我将知道屏幕尺寸并应用样式，但据我所知我无法从 css 更改 img src。那么现在我将如何使用这些不同分辨率的图像
回答by Rishi Php
Then Dynamically Change Image through jquery:
然后通过jquery动态改变图片：
HTML:
HTML：
<div id="header" data-role="header" data-position="fixed">
<img id="app-icon" src="pictures/app_logo.png" display="inline" />
</div>
Javascript:
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 :
通过 CSS：使用不同分辨率的媒体查询：
HTML:
HTML：
<div id="header" data-role="header" data-position="fixed">
<span id="app-icon"></div>
<span id="brand-icon"></div>
</div>
CSS:
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)
方向 - and (orientation: landscape)
Device WIDTH and (min-device-width : 480px) and (max-device-width : 854px)
设备宽度 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 */
}
回答by Vuka?in Manojlovi?
Creating support for more sizes is a problem, but you can fix it with @media queriesin CSS. Check this example code:
创建对更多尺寸的支持是一个问题，但您可以使用CSS 中的@media 查询来修复它。检查此示例代码：
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
With this code you can add support for all devices. Check this link for getting more code for more browsers
使用此代码，您可以添加对所有设备的支持。检查此链接以获取更多浏览器的更多代码
Functions which you can use:
您可以使用的功能：
- Width and height:
(min-device-width : 768px) and (max-device-width : 1024px) - Orientation:
(orientation: landscape)or(orientation: portrait) - Device pixel ratio:
(-webkit-device-pixel-ratio: 1.5)
- 宽度和高度：
(min-device-width : 768px) and (max-device-width : 1024px) - 方向：
(orientation: landscape)或(orientation: portrait) - 设备像素比：
(-webkit-device-pixel-ratio: 1.5)
EDIT:
编辑：
HTML:
HTML：
<div id="header" data-role="header" data-position="fixed">
<span id="app_icon" alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left"></span>
<span id="brand_icon" alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right"></span><h1></h1>
</div>
Change imginto spanand add IDs.
更改img成span和附加标识。
CSS:
CSS：
@media screen and (-webkit-device-pixel-ratio: 0.75) {
#app_icon {
width: 100px; /* Example size */
height: 100px; /* Example size */
background: url(pictures/app_logo_small.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 1) {
#app_icon {
width: 150px; /* Example size */
height: 150px; /* Example size */
background: url(pictures/app_logo_medium.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {
#app_icon {
width: 200px; /* Example size */
height: 200px; /* Example size */
background: url(pictures/app_logo_large.png);
}
}
@media screen and (-webkit-device-pixel-ratio: 2) {
#app_icon {
width: 300px; /* Example size */
height: 300px; /* Example size */
background: url(pictures/app_logo_xlarge.png);
}
}
With this example you can change your code and fix it. Hope this help!
通过此示例，您可以更改代码并修复它。希望这有帮助！
回答by biodiv
You can also do this using a handlebarshelper, which less code intensive and in my opinion the recommended method:
您也可以使用车把助手来做到这一点，它的代码密集程度较低，在我看来是推荐的方法：
if (screen.width <= 480) {
imgFolder = 'img/low/';
}
else {
imgFolder = 'img/high/';
}
Handlebars.registerHelper('imgFolder', function () {
return imgFolder
});
while img/low/and img/highcontain images in different resolutions with the same name.
whileimg/low/和img/high包含具有相同名称的不同分辨率的图像。
Then in your template:
然后在您的模板中：
<img src="{{imgFolder}}yourImage.png" />
Of course, you have to set the screen size values according to the devices your app targets.
当然，您必须根据您的应用所针对的设备来设置屏幕尺寸值。
Appendix:If you do not have 1:1 pixel mapping in cordova browser (which is NOT recommended - your images will have a blurry/unsharp look) screen.widthwill differ from browsers width (window.innerWidth) and you have to use $(window).width()or window.innerWidth. You might be able to fix a wrong mapping using media queries.
附录：如果您在cordova 浏览器中没有1:1 像素映射（不推荐这样做 - 您的图像将具有模糊/不清晰的外观）screen.width将与浏览器宽度（window.innerWidth）不同，您必须使用$(window).width()或window.innerWidth。您可以使用媒体查询修复错误的映射。
回答by Dylan Hamilton-Foster
I have found I've had to start adding support for pixel ratios of 0.5, 1, 1.3, 1.5, 2 and 3 using these media queries.
我发现我不得不开始使用这些媒体查询添加对 0.5、1、1.3、1.5、2 和 3 像素比的支持。
Note I am using -webkit-min-device-pixel-ratio rather than -webkit-device-pixel-ratio. I had found that on one of my test devices (Galaxy Tab 3 - 8") the pixel ratio was 1.3 and wasn't picking up any of the specific styles I had set in my phonegap app.
注意我使用的是 -webkit-min-device-pixel-ratio 而不是 -webkit-device-pixel-ratio。我发现在我的其中一台测试设备（Galaxy Tab 3 - 8"）上，像素比为 1.3，并且没有选择我在我的 phonegap 应用程序中设置的任何特定样式。
@media screen and (-webkit-min-device-pixel-ratio: 0.5) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 1) {
#app_icon {
width:64px;
height:64px;
background: url('../images/bigstart.png') no-repeat center bottom;
background-size: 64px 64px;
}
}
}
@media screen and (-webkit-min-device-pixel-ratio: 1.3) {
#app_icon {
width:64px;
height:64px;
background: url('../images/[email protected]') no-repeat center bottom;
background-size: 64px 64px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
#app_icon {
width:64px;
height:64px;
background: url('../images/[email protected]') no-repeat center bottom;
background-size: 64px 64px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
#app_icon {
width:64px;
height:64px;
background: url('../images/[email protected]') no-repeat center bottom;
background-size: 64px 64px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
#app_icon {
width:64px;
height:64px;
background: url('../images/[email protected]') no-repeat center bottom;
background-size: 64px 64px;
}
}
回答by Steven Benjamin
I think you have to divide the reported screen dimensions by the screen density to get the media query width and height dimensions.
我认为您必须将报告的屏幕尺寸除以屏幕密度才能获得媒体查询宽度和高度尺寸。
