複数の解像度と密度の携帯電話をサポート

Question

私は電話の新機能と問題に直面しています。異なる画面サイズと異なる画面解像度の複数のプラットフォームデバイスで動作するphonegapアプリケーションを作成しています。画面解像度に応じて異なる解像度。

これは、単純にhdpi、mdpi、ldpiフォルダに異なる解像度の画像を置くことでアンドロイドで実現でき、デバイスの画面解像度に応じて画像を自動的に取得します。しかし、これをphonegapで行う方法。

私はレスポンシブウェブデザインについて多くの記事を見ましたが、それらはすべてウェブページ上に要素を配置すると言われていますが、スクリーン解像度に基づいてイメージを配置する方法については教えていません。

ありがとうございます。

編集した質問

私は今、私は資産/ www /の画像フォルダ内の画像を持っているHTML

<div id="header" data-role="header" data-position="fixed"> 
<img alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left" /> 
<img alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right" /><h1></h1> 
</div> 

次のコードを使用しています。このフォルダは、同じ解像度の2つの画像app_logo.pngとcompany_logo.pngと、より高い解像度の2つの画像app_logo_big.pngとcompany_logo_big.pngで構成されています。これはメディアクエリを介して画面のサイズを知り、スタイルを適用します。 cssからimg srcを変更することはできません。だから私はどのように異なる解像度のこれらの画像を使用するのですか

Answer 1

を動的にjQueryを介して画像を変更します。

HTML：

<div id="header" data-role="header" data-position="fixed"> 
    <img id="app-icon" src="pictures/app_logo.png" display="inline" /> 
</div> 

Javascriptを：CSSを通して

$(document).ready(function() { 
    if(window.devicePixelRatio == 0.75) { 
    $("#app-icon").attr('src', '/images/lpdi/app-icon.png'); 
    } 
    else if(window.devicePixelRatio == 1) { 
      $("#app-icon").attr('src', '/images/mdi/app-icon.png'); 
    } 
    else if(window.devicePixelRatio == 1.5) { 
    $("#app-icon").attr('src', '/images/hpdi/app-icon.png'); 
    } 
    else if(window.devicePixelRatio == 2) { 
       $("#app-icon").attr('src', '/images/xpdi/app-icon.png'); 
    } 
} 

：使用メディアQueri

HTML：：

<div id="header" data-role="header" data-position="fixed"> 
    <span id="app-icon"></div> 
    <span id="brand-icon"></div> 
</div> 

CSS：

/* Low density (120), mdpi */ 
@media screen and (-webkit-device-pixel-ratio: 0.75) { 
    #app-icon { background-image:url(pictures/ldpi/app-icon.png); } 
    #brand-icon { background-image:url(pictures/ldpi/brand-icon.png); } 
} 

/* Medium density (160), mdpi */ 
@media screen and (-webkit-device-pixel-ratio: 1) { 
    #app-icon { background-image:url(pictures/mpi/app-icon.png); } 
    #brand-icon { background-image:url(pictures/mdpi/brand-icon.png); } 
} 

/* High density (240), hdpi */ 
@media screen and (-webkit-device-pixel-ratio: 1.5) { 
    #app-icon { background-image:url(pictures/hdpi/app-icon.png); } 
    #brand-icon { background-image:url(pictures/hdpi/brand-icon.png); } 
} 

/* Extra high density (320), xhdpi */ 
@media screen and (-webkit-device-pixel-ratio: 2) { 
    #app-icon { background-image:url(pictures/xdpi/app-icon.png); } 
    #brand-icon { background-image:url(pictures/xdpi/brand-icon.png); } 
} 

あなたを介してフィルタリングする場合は、

ORIENTATION異なる解像度のためのES - and (orientation: landscape)

デバイス幅and (min-device-width : 480px) and (max-device-width : 854px)

例：

@media screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width : 640px) and (max-device-width : 960px) and (orientation: landscape) { 
    /* Your style here */ 
} 

Answer 2

より多くのサイズのサポートを作成することは問題ですが、CSSで@media queriesと修正することができます。次のコード例を確認してください：

/* iPads (landscape) ----------- */ 
@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) { 
     /* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) { 
     /* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
    and (min-width : 1224px) { 
     /* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
    and (min-width : 1824px) { 
     /* Styles */ 
} 

このコードでは、すべてのデバイスのサポートを追加できます。 Check this link for getting more code for more browsers

あなたが使用できる機能：

• 幅と高さ：(min-device-width : 768px) and (max-device-width : 1024px)
• オリエンテーション：(orientation: landscape)または(orientation: portrait)
• デバイスピクセル比：(-webkit-device-pixel-ratio: 1.5)

EDIT：

HTML：

<div id="header" data-role="header" data-position="fixed"> 
<span id="app_icon" alt="app_icon" src="pictures/app_logo.png" display="inline" class="align-left"></span> 
<span id="brand_icon" alt="brand_icon" src="pictures/company_logo.png" display="inline" class="align-right"></span><h1></h1> 
</div> 

変更imgspanへとIDを追加します。

CSS：

@media screen and (-webkit-device-pixel-ratio: 0.75) { 
    #app_icon { 
    width: 100px; /* Example size */ 
    height: 100px; /* Example size */ 
    background: url(pictures/app_logo_small.png); 
    } 
} 

@media screen and (-webkit-device-pixel-ratio: 1) { 
    #app_icon { 
    width: 150px; /* Example size */ 
    height: 150px; /* Example size */ 
    background: url(pictures/app_logo_medium.png); 
    } 
} 

@media screen and (-webkit-device-pixel-ratio: 1.5) { 
    #app_icon { 
    width: 200px; /* Example size */ 
    height: 200px; /* Example size */ 
    background: url(pictures/app_logo_large.png); 
    } 
} 

@media screen and (-webkit-device-pixel-ratio: 2) { 
    #app_icon { 
    width: 300px; /* Example size */ 
    height: 300px; /* Example size */ 
    background: url(pictures/app_logo_xlarge.png); 
    } 
} 

この例では、あなたのコードを変更し、それを修正することができます。このヘルプが欲しい！

Answer 3

私はあなたがメディアクエリーの幅と高さの寸法を取得するには、画面の密度によって報告された画面サイズを分割する必要があると思います。

Answer 4

はまた、集中し、私の意見では推奨される方法をhandlebarsヘルパー、以下のコードを使用してこの操作を行うことができます。

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


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

しばらくimg/low/とimg/highは、同じ名前の異なる解像度の画像が含まれています。

は、その後、あなたのテンプレートに：もちろん

<img src="{{imgFolder}}yourImage.png" /> 

、アプリのターゲットデバイスに応じて、画面サイズの値を設定する必要があります。

付録： あなたは1持っていない場合：（推奨されません - あなたのイメージがぼやけ/不鮮明な外観を持つことになります）コルドバブラウザで1ピクセルマッピングscreen.widthを（window.innerWidth）幅のブラウザとは異なりますし、 $(window).width()またはwindow.innerWidthを使用する必要があります。メディアクエリを使用して間違ったマッピングを修正できる可能性があります。

Answer 5

私はこれらのメディアクエリを使用して、ピクセル比率0.5,1,1.3,1.5,2,3のサポートを追加しなければならないことがわかりました。

注-webkit-device-pixel-ratioではなく-webkit-min-device-pixel-ratioを使用しています。 私のテストデバイス（Galaxy Tab 3 - 8 "）のピクセル比率が1.3で、私のphonegapアプリで設定した特定のスタイルを選択していないことがわかりました。

@media screen and (-webkit-min-device-pixel-ratio: 0.5) { 
    #app_icon { 
     width:64px; 
     height:64px; 
     background: url('../images/bigstart.png') no-repeat center bottom; 
     background-size: 64px 64px; 
    } 
} 
@media screen and (-webkit-min-device-pixel-ratio: 1) { 
    #app_icon { 
     width:64px; 
     height:64px; 
     background: url('../images/bigstart.png') no-repeat center bottom; 
     background-size: 64px 64px; 
    } 
} 
} 
@media screen and (-webkit-min-device-pixel-ratio: 1.3) { 
    #app_icon { 
     width:64px; 
     height:64px; 
     background: url('../images/bigstart@2x.png') no-repeat center bottom; 
     background-size: 64px 64px; 
    } 
} 
@media screen and (-webkit-min-device-pixel-ratio: 1.5) { 
    #app_icon { 
     width:64px; 
     height:64px; 
     background: url('../images/bigstart@2x.png') no-repeat center bottom; 
     background-size: 64px 64px; 
    } 
} 
@media screen and (-webkit-min-device-pixel-ratio: 2) { 
    #app_icon { 
     width:64px; 
     height:64px; 
     background: url('../images/bigstart@2x.png') no-repeat center bottom; 
     background-size: 64px 64px; 
    } 
} 
@media screen and (-webkit-min-device-pixel-ratio: 3) { 
    #app_icon { 
     width:64px; 
     height:64px; 
     background: url('../images/bigstart@3x.png') no-repeat center bottom; 
     background-size: 64px 64px; 
    } 
}