logo标签列表

在PhoneGap中支持多种分辨率和密度的图像。

csshtmlcordovaresponsive-design
20

我是phonegap的新手，遇到了一个问题。我正在制作一个可以在多个不同屏幕大小和不同屏幕分辨率的平台设备上运行的phonegap应用程序，因此我必须根据屏幕分辨率加载不同分辨率的图像。

在Android中，你只需将不同分辨率的图像放置在hdpi、mdpi和ldpi文件夹中，它就会自动获取适合当前设备屏幕分辨率的图像。但是，在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文件夹下。这个文件夹包含两张相同分辨率的图片app_logo.png和company_logo.png，以及两张更高分辨率的图片app_logo_big.png和company_logo_big.png。现在通过媒体查询，我可以得知屏幕大小并应用样式，但据我所知，我无法从CSS中更改img src。那么我该如何使用这些不同分辨率的图片呢？

5个回答
27

然后通过 jQuery 动态更改图像：

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

通过 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 */
}
你用了上面的哪个解决方案？ - MDroid
我建议使用-webkit-min-device-pixel-ratio而不是固定比例的-webkit-device-pixel-ratio。 - givanse
我可以证明，在使用Adobe PhoneGap Build构建的Windows Phone 8.1应用程序中，-webkit-device-pixel-ratio完全被忽略。 - andreszs
那么实际图像分辨率怎么样呢？72 ppi是网络的典型值，但我不知道在移动设备上是否有任何意义。pictures/mpi/brand-icon.png和pictures/xdpi/brand-icon.png之间的区别是什么？前者是72 ppi，后者是144 dpi，还是前者宽100像素，高50像素，而后者宽200像素，高100像素？ - universalhandle
3

支持更多尺寸是一个问题，但是您可以使用CSS中的@media queries来解决它。请查看以下示例代码：

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

使用此代码，您可以为所有设备提供支持。要获取更多浏览器的代码，请查看此链接。
您可以使用以下功能：
- 宽度和高度：(min-device-width: 768px) and (max-device-width: 1024px) - 方向：(orientation: landscape)或(orientation: portrait) - 设备像素比：(-webkit-device-pixel-ratio: 1.5) 编辑：
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>

将 img 元素改为 span 并添加 ID。 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);
  }
}

通过这个例子，您可以更改代码并修复它。希望这能帮到您！

3
您也可以使用handlebars助手来完成此操作，这种方法代码更少，我认为这是推荐的方法：

handlebars 是一个模板引擎。

if (screen.width <= 480) {
    imgFolder = 'img/low/';
}
else {
    imgFolder = 'img/high/';
}


Handlebars.registerHelper('imgFolder', function () {
    return imgFolder
});

当 img/low/ 和 img/high 文件夹中包含相同名称的不同分辨率的图片时。

然后在您的模板中：

<img src="{{imgFolder}}yourImage.png" />

当然，您必须根据应用程序针对的设备设置屏幕尺寸值。
附录： 如果您在 cordova 浏览器中没有 1:1 像素映射（不建议使用 - 您的图片会具有模糊/不清晰的外观），则 screen.width 将与浏览器宽度（window.innerWidth）不同，您必须使用 $(window).width() 或 window.innerWidth。您可以使用媒体查询来修复错误映射。
1
我发现我必须开始添加对0.5、1、1.3、1.5、2和3像素比率的支持，使用这些媒体查询。
请注意，我使用的是-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/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;
    }   
}
我刚看到了你的回答，我正在实现它。知道这是5年前的事情，它仍然是Phonegap Build的最佳方法吗？谢谢Dylan！ - Vincent
0

我认为您需要将报告的屏幕尺寸除以屏幕密度，以获取媒体查询的宽度和高度尺寸。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接