Поддержка нескольких разрешений Изображения в телефоне с разным размером

Question

Поддержка нескольких разрешений Изображения в телефоне с разным размером

0

Я разработал приложение Phonegap, и у меня проблема с изменением размера изображения в соответствии с Android-устройством (ширина и высота). По мере изменения размера и ширины устройства я хочу изменить размер изображения. Я использую ниже ссылку для этого, но он не работает, поддерживая множественное разрешение и плотность изображений в телефоне. Мой код выглядит так:

<!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, поэтому каждая помощь будет заметна. Я хочу это решить. пожалуйста помоги

MDroid 03 окт. 2013, в 10:55

Источник

0

Пожалуйста, ведите меня, если я где-то ошибся.
MDroid 03 окт. 2013, в 08:41
0

В вашем HTML пути к изображениям начинаются с images тогда как в вашем JavaScript они представляют собой /images . Может ли это быть проблемой?
ville 03 окт. 2013, в 09:28
0

Hii @ville Спасибо за ответ. но это не влияет ...
MDroid 03 окт. 2013, в 09:31

Показать ещё 1 комментарий

Теги:

jquery

html

android

css

cordova

1 ответ

Ещё вопросы

Пожалуйста, ведите меня, если я где-то ошибся.
В вашем HTML пути к изображениям начинаются с images тогда как в вашем JavaScript они представляют собой /images . Может ли это быть проблемой?
Hii @ville Спасибо за ответ. но это не влияет ...

Rupesh · Accepted Answer · 2013-10-04T16-34-00.000Z

Решение, которое вы использовали, будет работать для разных разрешений. как обычный и сетчатый дисплей. Если вы хотите изменить размеры изображений в соответствии с размерами устройства (но с теми же разрешениями), вы можете использовать мультимедийные запросы CSS 3 и применять различные css на устройствах различного размера.

ваш css перейдет под нечто вроде this-

 @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
}

вы также можете использовать комбинацию запросов ширины и разрешения.

Пожалуйста, ищите адаптивные веб-дизайн и медиа-запросы, и вы получите много нового.