0

Phonegap アプリを開発しましたが、Android デバイスごとに画像のサイズを変更するのに問題があります (幅と高さを設定します)。デバイスの高さと幅が変わると、画像のサイズを変更したいと思います。そのために以下のリンクを使用しましたが、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 を初めて使用するので、すべての助けに感謝します。解決したい。助けてください

4

1 に答える 1