PhoneGap を使用して Android および iOS 用のアプリを作成しています。
PhoneGap のテンプレートから「HelloWorld」アプリを作成した後、デフォルトでビューポートに target-densitydpi=device-dpi が表示されました。さて、今のところは問題ありませんが、JQuery Mobile UI でいくつかのテストを実行することにしました。それらはビューポートでtarget-densitydpiを使用しません (ちなみに、私が使用した場合、Web サイトは高 dpi デバイスで非常に小さく見えるはずです)。
低解像度デバイスと高解像度デバイスでアプリの画像が美しく見えるようにする必要があるため、Galaxy S4 でいくつかのテストを実行することにしました。
まず、target-densitydpi=device-dpi を削除します:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
document.width は 360px だったので、360px の画像を作成しましたが、私の GS4 画面では非常にぼやけていました。
<img src="360img.jpg" style="width:360px;">
次に、target-densitydpi=device-dpi を有効にします:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
document.width は 1080px だったので、1080px の画像を作成したところ、私の GS4 画面では最適でした。
<img src="1080img.jpg" style="width:1080px;">
3番目に、target-densitydpi=device-dpi が 1080px の画像で削除されました:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
document.width は 360px だったので、以前に作成した 1080px の画像を使用しました。GS4 の画面では見栄えがします。
<img src="1080img.jpg" style="width:100%;">
2 回目と 3 回目のテストで同じ結果を得ることができましたが、PhoneGap アプリを使用する最良の (または正しい) 方法はどれですか?
ありがとう！
EDIT1：
これらの画像をAPI経由で提供することを考えています。ここで、ウィンドウのサイズに正しいサイズの画像を返すように指示できます。
window.width はすべてのテストで 1080px だったので、正しいサイズの画像を返すことは問題になりません。
アイコンについては、SVG を検討しており、解像度ごとにスプライトを作成する必要はありません。CSS または JavaScript を介して画像のサイズを変更できますが、それでも見栄えは良いはずです。
target-densitydpi=device-dpi を使用しないと思った理由は JQuery Mobile UI でした。ライブラリはレスポンシブであり、それを使用していません。なぜですか?