在不同尺寸的手机间隙中支持多种分辨率图像

我开发了一个Phonegap应用程序，并且根据Android设备（设置宽度和高度）调整图像的大小有问题。随着设备高度和宽度的变化，我想更改我的图像尺寸。我已经下面链接使用为，但它不工作supporting multiple resolution and density of images in phonegap 我的代码如下在不同尺寸的手机间隙中支持多种分辨率图像

<!DOCTYPE html> 
<html> 
<head> 
    <title>Worklist</title> 

    <meta charset="utf-8" content=""> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=no"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/> 
    <link rel="stylesheet" href="css/style.css"> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     if(window.devicePixelRatio == 0.75) { 
      $("#dIcon_notification").attr('src', '/images/mpdi/my_notification_new.png'); 
     } 
     else if(window.devicePixelRatio == 1) { 
      $("#dIcon_notification").attr('src', '/images/mdpi/my_notification_new.png'); 
     } 
     else if(window.devicePixelRatio == 1.5) { 
      $("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png'); 
     } 
     else if(window.devicePixelRatio == 2) { 
      $("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png'); 
     } 
    } 
    </script> 
    </head> 
<body> 
<div data-role="page" data-theme="f"> 


    <div class="ui-header ui-bar-a" role="banner" data-role="header" data-position="fixed"> 
     <h1 style="white-space:pre-wrap" aria-level="1" role="heading" tabindex="0" class="ui-title" >Smart Self Service</h1> 
    </div><!--/header--> 

<div data-role="content" data-theme="f"> 

     <div id="center_content" > 
     <div id="dashboard"> 
      <a href="Notification.html" data-ajax="false" ><img id="dIcon_notification" display="inline" src="images/hdpi/my_notification_new.png" class="dashaboard_icon" alt="" ></a> 
      <a href="#" ><img id="dIcon_request" src="images/hdpi/new_request_new.png" class="dashaboard_icon" alt="" ></a> 
      <a href="#" ><img id="dIcon_setting" src="images/hdpi/setting.png"  class="dashaboard_icon" alt="" ></a> 
      <a href="#" ><img id="dIcon_exit" src="images/hdpi/exit.png"    class="dashaboard_icon" alt="" ></a> 
     </div> 
     </div> 
    </div><!-- /content --> 

</div><!-- /page --> 
</body> 
</html>

我是新来的jQuery和CSS所以每次帮助将很可观。我想解决它。请帮助

来源

2013-10-03 MDroid

请引导我如果我犯了任何错误。 – MDroid

在你的HTML中，图像路径以'images'开始，而在你的JavaScript中它们是'/ images'。这可能是问题吗？ – ville

嗨@维尔答复。但它不会影响... – MDroid

您使用的解决方案将适用于不同的分辨率。像正常和视网膜显示。如果您想根据设备大小（但相同的分辨率）更改图像大小，则可以使用CSS 3媒体查询并在不同大小的设备上应用不同的css。

你的CSS会去下像这个 -

@media screen and (min-device-width : 480px) and (max-device-width : 854px){ 
//css for devices whose width is more than 480px but less than 854px 
}

可以使用宽度和分辨率媒体查询的组合为好。

请搜索自适应网页设计和媒体查询，你会得到很多东西。

来源

2013-10-04 18:15:26 Rupesh

在不同尺寸的手机间隙中支持多种分辨率图像

回答

相关问题