3  

You can also do this using a handlebars helper, 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/high contain images in different resolutions with the same name.

img/low/和img/high在不同分辨率下的图像都有相同的名称。

Then in your template:

然后在你的模板:

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.width will 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的像素映射(这是不推荐的-你的图像会有模糊/不清晰的外观)。宽度不同于浏览器的宽度(window. innerwidth)，您必须使用$(window).width()或window. innerwidth。您可能可以使用媒体查询修复错误的映射。

3  

Creating support for more sizes is a problem, but you can fix it with @media queries in 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)
• 宽度和高度:(最小设备宽度:768px)和(max-设备宽度:1024px)
• Orientation: (orientation: landscape) or (orientation: portrait)
• 方向:(方向:风景)或(方向:肖像)
• Device pixel ratio: (-webkit-device-pixel-ratio: 1.5)
• 设备像素比:(-webkit-设备像素比:1.5)

EDIT:

编辑:

HTML:

HTML:

Change img into span and add IDs.

将img更改为span并添加id。

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!

通过这个例子，您可以修改代码并修复它。希望这次的帮助!

1  

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-设备像素比，而不是-webkit- de- 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/bigstart@2x.png') 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/bigstart@2x.png') 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/bigstart@2x.png') 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/bigstart@3x.png') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}

0  

I think you have to divide the reported screen dimensions by the screen density to get the media query width and height dimensions.

我认为必须将报告的屏幕尺寸除以屏幕密度，才能得到媒体查询的宽度和高度。