20

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

这可以通过简单地将不同分辨率的图像放在 hdpi、mdpi 和 ldpi 文件夹中来在 android 中实现，并且它（android）会根据设备的屏幕分辨率自动获取图像。但是如何在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 文件夹中有图像。这个文件夹包含 2 个相同分辨率的图像 app_logo.png 和 company_logo.png 以及 2 个更高分辨率的图像 app_logo_big.png 和 company_logo_big.png 现在通过媒体查询我将知道屏幕大小并应用样式但据我所知我无法从 css 更改 img src。那么现在我将如何使用这些不同分辨率的图像

4

5 回答 5

28

然后通过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');  
  }
}

通过 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 */
}
于 2012-08-29T11:56:41.837 回答
3

创建对更多尺寸的支持是一个问题，但您可以使用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 */
}

使用此代码，您可以添加对所有设备的支持。检查此链接以获取更多浏览器的更多代码

您可以使用的功能：

  • 宽度和高度：(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);
  }
}

通过此示例，您可以更改代码并修复它。希望这有帮助！

于 2012-08-29T11:49:41.587 回答
3

您也可以使用车把助手来执行此操作，它的代码密集度较低，在我看来是推荐的方法：

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


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

whileimg/low/并img/high包含具有相同名称的不同分辨率的图像。

然后在您的模板中：

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

当然，您必须根据应用所针对的设备设置屏幕尺寸值。

附录： 如果您在科尔多瓦浏览器中没有 1:1 像素映射（不推荐 - 您的图像将具有模糊/不清晰的外观）screen.width将与浏览器宽度（window.innerWidth）不同，您必须使用$(window).width()或window.innerWidth。您也许可以使用媒体查询来修复错误的映射。

于 2013-05-27T08:33:39.493 回答
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;
    }   
}
于 2013-10-03T23:30:39.057 回答
0

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

于 2012-12-28T17:38:22.260 回答