Question

我开发了一个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的新手，所以每一个帮助都会很明显。我想解决它。请帮忙

Answer 1

您使用的解决方案适用于不同的分辨率。像正常和视网膜显示。如果要根据设备大小（但分辨率相同）更改图像大小，可以使用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
}

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

请搜索自适应网页设计和媒体查询，您将获得很多东西。

支持不同大小的手机间隙中的多个分辨率图像

1 个答案: