0

html5、CSS3、JQM、phonegapを使用してAndroidプラットフォーム用のモバイルアプリケーションを開発しています。Androidスマートフォン間で利用できる画面サイズはさまざまであるため、背景画像や複数の画面の画像を合わせる方法を見つけることができません。背景画像は、HTC One V、Samsung S3 miniなどには適切に適合しますが、SamsungNoteなどの大型の電話では拡大できません。

私たちが使用したアプローチ

  1. mdpi、hdpi、xhdpiフォルダーには解像度320 * 480の画像を使用し、CSS3を使用して、必要に応じてそれらをより大きな画面に拡大しようとしています。使用したCSS：

    /*各画面のbkground画像*/

    welcomePage {

        background:url('file:///android_res/drawable/back_welcome_2x.png') no-repeat center center;
background-attachment:fixed;
min-height:100%;
background-size:cover;

    }

    • これは動作しません。

  2. width = device-width、height = device-height、initial scale = 1.0、target-dpi = device-dpiを挿入し、528 * 909（たとえば）の画像を使用して、ビューポートメタデータを変更しようとしました。これにより、画像は少しカットされますが、画面にフィットします。同時に、UIのすべてのjqueryモバイルコンポーネントのサイズが縮小されます。これが正しいアプローチであるかどうかはわかりません。

できるだけ多くの画面サイズをターゲットにするために、考慮すべきパラメータはどれですか？画面サイズ、解像度、またはDPI？

背景画像がほぼすべてのAndroid携帯電話の画面（サムスンノートなど）に適合することを確認するために、正確に何ができるでしょうか。

それとも、どちらかのアプローチ1または2で即興で演奏できるかどうかわかりますか？

4

1 に答える 1

0

背景画像はタイルではないと思います。

画像を引き伸ばしすぎないでください。画像がぼやけたり、不鮮明になったりします。ネイティブの Android アプリと同様に、背景画像を複数の解像度で出荷します。ここで説明したように、ハンドルバー ヘルパーを使用して、正しい画像を非常に簡単に選択できます。

Javascript:

if (screen.width <= 480) {
    imgFolder = 'img/low/';
}
else {
    imgFolder = 'img/high/';
}

Handlebars.registerHelper('imgFolder', function () {
    return imgFolder
});

HTML:

<body style="background:url('{{imgFolder}}yourImage.png'); background-size:cover;" />

もちろん、ldpi/mdpi/hdpi/xhdpi の解像度を追加する必要がありますが、現時点ではわかりません。ブラウザーでgoogles のdp値 ( 以外のものdpi) を使用して Android の内部サイズ調整メカニズムを使用できるとは思わないため、最も一般的な 4 つの解像度 (幅320、480、600、800 など) を使用することをお勧めします。 - 私が間違っているかもしれません) 中間解像度の画像を縮小します。

Android の場合、4 つの画像フォルダーを使用するのが一般的です。

  • ldpi
  • hdpi
  • mdpi
  • xhdpi

名前に dpi が含まれていますが、これは確認すべきパラメーターではありません。解像度を決定するためのパラメータとして、screen.widthpg app/cordova ブラウザに 1:1 ピクセル マッピングがあることを確認した後、- を使用する必要があります。これを行うには、次を使用します。

alert('screen size: ' + screen.width + ' x ' + screenheight + ' browser size: ' + $(window).width() + ' x ' + $(window).height());

のwidthとheightはwindowの値と一致する必要がありますscreen。そうしないと、画像が拡大縮小されて見栄えが悪くなり、アプリの外観がネイティブのものよりもはるかに悪くなります (ただし、ピクセル ベースの (.png/.jpg) 画像を使用しないという非常にまれな状況を除きます)。メディア クエリを使用してマッピングを修正できますが、これは少し手間がかかります。

1:1 ピクセル マッピングが完了したら、使用できます(アプリが横向きと縦向きの両方をサポートしている場合は、小さい方の値screen.widthを比較screen.widthして取得する必要があります)。screen.heightなんらかの理由で 1:1 マッピングが不可能な場合 (最悪の場合、何としてでも回避する必要があります)、window.innerWidthまたはを使用します$(window).width()。jqm の動作 (指定したメタ タグを使用するとサイズが縮小される) は、ピクセル マッピングが可能な限り正確ではないことを示している可能性があります。

すべての画像の倍率は

3:4:6:8 (ldpi:mdpi:hdpi:xhdpi)
于 2013-05-27T09:39:06.763 に答える