Question

如何在Android应用的嵌入式HTML资源中为不同的屏幕分辨率（hdpi，ldpi，mdpi）显示不同的图像？

HTML资源位于assets，但可以根据需要进行更改。

如果无法做到这一点，您如何根据屏幕分辨率更改图像的显示尺寸？

Answer 1

/*
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; 
    }
}

Answer 2

我设法通过@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;
    }
}

根据documentation（构建支持不同屏幕密度的网页），这仅适用于Android 2.0或更高版本。

你似乎永远不会知道CSS。

Android中HTML资源中不同分辨率的不同图像

2 个答案: