web-dev-qa-db-ja.com

フォンギャップで画像の複数の解像度と密度をサポート

私は電話ギャップの初心者であり、問​​題に直面しています。画面サイズと画面解像度が異なる複数のプラットフォームデバイスで実行される電話ギャップアプリを作成しているため、画面解像度に応じて異なる解像度の画像を読み込む必要があります。

これは、Android=で異なる解像度の画像をhdpi、mdpi、ldpiフォルダーに置くだけで実現できます。また、（Android）デバイスの画面解像度に応じて自動的に画像を取得します。ただし、これを行う方法電話ギャップ。

レスポンシブ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つの画像で構成されます。 img srcをcssから変更できません。では、これらの異なる解像度の画像をどのように使用しますか

csshtmlcordovaresponsive-design
20
prateek

次に、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 */
}
_
28
Rishi Php

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

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

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

3
Vukašin Manojlović

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_を使用する必要があります。メディアクエリを使用して、誤ったマッピングを修正できる場合があります。

3
biodiv

これらのメディアクエリを使用して、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であり、電話ギャップアプリで設定した特定のスタイルをどれも選択していないことがわかりました。

@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/[email protected]') 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/[email protected]') 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/[email protected]') 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/[email protected]') no-repeat center bottom;
        background-size: 64px 64px;
    }   
}
1
Dylan Hamilton-Foster

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

0
Steven Benjamin