20

私はphonegapを初めて使用し、問題に直面しています.異なる画面サイズと異なる画面解像度の複数のプラットフォームデバイスで実行されるphonegapアプリを作成しているため、画面解像度に応じて異なる解像度の画像をロードする必要があります.

これは、さまざまな解像度の画像をhdpi、mdpi、ldpiフォルダーに入れるだけでAndroidで実現でき、デバイスの画面解像度に応じて（Android）画像が自動的に取得されます。しかし、phonegapでこれを行う方法。

レスポンシブ Web デザインに関する多くの記事を見てきましたが、それらはすべて Web ページ上の要素の配置について述べていますが、画面解像度に基づいて画像を配置する方法について述べているものはありません。

ありがとうございます。

編集された質問

私は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>

今は assets/www/pictures フォルダー内に画像があります。このフォルダは、同じ解像度の app_logo.png と company_logo.png の 2 つの画像と、より高い解像度の app_logo_big.png と company_logo_big.png の 2 つの画像で構成されています。現在、メディア クエリを使用して、画面サイズを把握し、スタイルを適用しますが、私が知る限り、 css から img src を変更できません。では、解像度の異なるこれらの画像をどのように使用するのでしょうか

4

5 に答える 5

28

次に、jqueryを使用して画像を動的に変更します。

HTML：

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

Javascript：

$(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');  
  }
}

CSSを介して：異なる解像度のメディアクエリを使用する：

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

フィルタリングしたい場合は、

オリエンテーション -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 */
}
于 2012-08-29T11:56:41.837 に答える
3

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

/* 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 */
}

このコードを使用すると、すべてのデバイスのサポートを追加できます。このリンクをチェックして、より多くのブラウザー用のコードを入手してください

使用できる機能:

  • 幅と高さ:(min-device-width : 768px) and (max-device-width : 1024px)
  • 向き:(orientation: landscape)または(orientation: portrait)
  • デバイスのピクセル比:(-webkit-device-pixel-ratio: 1.5)

編集：

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>

に変更imgしspanて 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);
  }
}

この例では、コードを変更して修正できます。この助けを願っています！

于 2012-08-29T11:49:41.587 に答える
1

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

-webkit-device-pixel-ratio ではなく、-webkit-min-device-pixel-ratio を使用していることに注意してください。私のテスト デバイスの 1 つ (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;
    }   
}
于 2013-10-03T23:30:39.057 に答える
0

メディアクエリの幅と高さの寸法を取得するには、報告された画面の寸法を画面密度で割る必要があると思います。

于 2012-12-28T17:38:22.260 に答える