web-dev-qa-db-fra.com

prise en charge de plusieurs résolutions et densités d'images dans phonegap

Je suis nouveau sur Phonegap et, face à un problème, je crée une application phonegap qui fonctionnera sur plusieurs plates-formes de différentes tailles d'écran et de différentes résolutions d'écran. Je dois donc charger des images de résolution différente en fonction de la résolution de l'écran.

ceci peut être réalisé dans Android en plaçant simplement vos images de résolution différente dans les dossiers hdpi, mdpi et ldpi et il (Android) récupère les images automatiquement en fonction de la résolution de l'écran des appareils. Mais comment faire cela dans Phonegap.

J'ai vu beaucoup d'articles sur la conception Web réactive qu'ils disent tous sur le positionnement des éléments sur une page Web, mais aucun d'entre eux n'a expliqué comment placer des images sur la base de résolutions d'écran.

merci j'avance.

question modifiée

j'ai utilisé le code suivant pour 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>

maintenant, j'ai des images dans le dossier assets/www/pictures. ce dossier est composé de 2 images de même résolution app_logo.png et company_logo.png et de 2 images de résolution supérieure app_logo_big.png et company_logo_big.png, grâce aux requêtes des médias, je connaîtras la taille de l'écran et appliquerai les styles, mais pour autant que je sache, ne peut pas changer img src de css. Alors maintenant, comment vais-je utiliser ces images de résolution différente

htmlcsshtml5cordovaresponsive-design
20
prateek

Puis, modifiez dynamiquement l'image via 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');  
  }
}

Via CSS: Utiliser les requêtes multimédia pour différentes résolutions:

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

Si vous voulez filtrer,

ORIENTATION - and (orientation: landscape)

Périphérique WIDTH and (min-device-width : 480px) and (max-device-width : 854px) 

Exemple:

@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

Créer un support pour plusieurs tailles pose un problème, mais vous pouvez le résoudre avec @media queries in CSS. Vérifiez cet exemple de code:

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

Avec ce code, vous pouvez ajouter un support pour tous les appareils. Cochez ce lien pour obtenir plus de code pour plus de navigateurs

Fonctions que vous pouvez utiliser:

  • Largeur et hauteur: (min-device-width : 768px) and (max-device-width : 1024px)
  • Orientation: (orientation: landscape) ou (orientation: portrait)
  • Ratio de l'appareil: (-webkit-device-pixel-ratio: 1.5)

MODIFIER:

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>

Remplacez img par span et ajoutez des 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);
  }
}

Avec cet exemple, vous pouvez modifier votre code et le corriger. J'espère que cette aide!

3
Vukašin Manojlović

Vous pouvez également le faire en utilisant un helper guidon , qui nécessite moins de code et, à mon avis, la méthode recommandée:

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


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

tandis que img/low/ et img/high contiennent des images de résolutions différentes portant le même nom.

Puis dans votre modèle:

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

Bien entendu, vous devez définir les valeurs de taille d'écran en fonction des appareils ciblés par votre application.

Annexe: Si vous ne disposez pas de mappage 1: 1 en pixels dans le navigateur Cordova (ce qui n'est PAS recommandé - vos images auront un aspect flou/flou) screen.width sera différent de la largeur du navigateur (window.innerWidth) et vous devez utiliser $(window).width() ou window.innerWidth. Vous pourrez peut-être corriger un mappage incorrect à l'aide de requêtes sur les supports.

3
biodiv

J'ai constaté que je devais commencer à ajouter la prise en charge des ratios de pixels de 0,5, 1, 1,3, 1,5, 2 et 3 à l'aide de ces requêtes multimédias.

Remarque J'utilise -webkit-min-device-pixel-ratio plutôt que -webkit-device-pixel-ratio . J'avais constaté que sur l'un de mes périphériques de test (Galaxy Tab 3 - 8 ") 1.3 et ne prenais aucun des styles spécifiques que j'avais définis dans mon application 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/[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

Je pense que vous devez diviser les dimensions d'écran rapportées par la densité d'écran pour obtenir la largeur et la hauteur de la requête de support.

0
Steven Benjamin