0

phonegap の JQuery Mobile が iphone で正常に動作していることに気付きました。しかし、Android、特に Ldpi(320X240) で同様のアプリケーションを実行すると、正しく動作しません。ボタンなどの画像がピクセル化されます。これに関するヘルプは非常に高く評価されています。

前もって感謝します

4

1 に答える 1

1

Android アプリでは、各画面密度に対して複数のビットマップを提供できますres/drawable-ldpi res/drawable-hdpi。

しかし、phonegap はアセット フォルダーからビットマップを読み込むため、ここでは機能しません。ただし、css3 メディア クエリを使用して、Android が Web ページで行うのとまったく同じように行うことができます。

例:

  • 100px の画像の名前は btn-mdpi.png です。
  • btn-ldpi.png という名前の 75 ピクセルの画像を作成し、
  • btn-hdpi.png という名前の 150 ピクセルの画像を作成し、
  • 次に、btn-xhdpi.png という名前の 200 ピクセルの画像を作成します。

ここ<head>にあなたのウェブページがあります：

<head>
  <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
  <style>
    input {
        background: transparent url(btn-mdpi.png);
        height: 100px;
    }

    @media screen and (-webkit-max-device-pixel-ratio:0.75) {
        input {
        background: transparent url(assets/btn-ldpi.png);
        height: 75px;
        }
    }
    @media screen and (-webkit-max-device-pixel-ratio:1.0) {
        input {
        background: transparent url(assets/btn-mdpi.png);
        height: 100px;
        }
    }
    @media screen and (-webkit-max-device-pixel-ratio:1.5) {
        input {
        background: transparent url(assets/btn-hdpi.png);
        height: 150px;
        }
    }
    @media screen and (-webkit-max-device-pixel-ratio:2.0) {
        input {
        background: transparent url(assets/btn-xhpi.png);
        height: 200px;
        }
    }
  </style>
</head>

密度ごとに、画面密度に合わせて異なるビットマップが使用されます。iPhone 4+ とその Retina ディスプレイでも動作します。

詳細については、この古い romain Nurik の投稿を参照してください: http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

于 2012-10-17T15:55:07.513 に答える