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

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

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

似乎你永远不会知道足够多的 CSS。