Разные картинки для разных разрешений в HTML ресурсах в Android - PullRequest
Новая
       23

Разные картинки для разных разрешений в HTML ресурсах в Android

1 голос
/ 15 ноября 2010

Как отображать различные изображения для разных разрешений экрана (hdpi, ldpi, mdpi) во встроенном ресурсе HTML приложения Android?

Ресурс HTML находится в assets, но его можно изменитьпри необходимости.

Если это невозможно, как изменить размер изображения на экране в зависимости от разрешения экрана?

Ответы [ 2 ]

1 голос
/ 18 декабря 2011 
/*
MDPI Resources for Midium-density (Mdpi) screens (~160dpi).
CSS for medium density (Mdpi) Android layouts in here
webkit-device-pixel-ratio:1
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1),
       only screen and (min--moz-device-pixel-ratio: 1),
       only screen and (min-resolution: 160dpi)
{
    .title
    {
      text-align: center; 
      vertical-align: middle; 
      color: White; 
      font-size: 1.25em; 
    }
}


/* 
High Density Resources for (Hdpi) screens (~240dpi).
CSS for High density (Hdpi) Android layouts in here
webkit-device-pixel-ratio:1.5
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi)
{
    .title
    {
      text-align: center; 
      vertical-align: middle; 
      color: White; 
      font-size: 2.25em; 
    }
}
0 голосов
/ 16 ноября 2010

Мне удалось сделать это с @media запросами и -webkit-device-pixel-ratio.Хотя изображения должны быть расположены в ресурсах, вы можете использовать папки для их правильной организации. 

@media screen and (-webkit-device-pixel-ratio:0.75) {
    #header {
        background-image: url('ldpi/background.png');
        width: 75px;
        height: 75px;
    }
}

@media screen and (-webkit-device-pixel-ratio:1.0) {
    #header {
        background-image: url('mdpi/background.png');
        width: 100px;
        height: 100px;
    }
}

@media screen and (-webkit-device-pixel-ratio:1.5) {
    #header {
        background-image: url('hdpi/background.png');
        width: 150px;
        height: 150px;
    }
}

В соответствии с документацией ( Создание веб-страниц для поддержки различных плотностей экрана), это работает только в Android 2.0 или выше.

Кажется, вы никогда не знаете достаточно CSS.

...