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

ドキュメント（さまざまな画面密度をサポートするWebページの構築）によると、これはAndroid2.0以降でのみ機能します。

あなたは十分なCSSを決して知らないようです。