webentwicklung-frage-antwort-db.com.de

unterstützung der mehrfachen Auflösung und Bilddichte in Phonegap

Ich bin neu bei phonegap und stehe vor einem Problem. Ich mache eine phonegap-App, die auf mehreren Plattformgeräten mit unterschiedlicher Bildschirmgröße und unterschiedlicher Bildschirmauflösung ausgeführt werden kann. Daher muss ich Bilder mit unterschiedlicher Auflösung je nach Bildschirmauflösung laden.

dies kann in Android erreicht werden, indem Sie einfach Bilder mit unterschiedlicher Auflösung in den Ordnern HDpi, MDpi und LDpi ablegen und (Android) Bilder automatisch abhängig von der Bildschirmauflösung des Geräts abrufen. Aber wie funktioniert das in Phonegap?.

Ich habe viele Artikel über responsives Webdesign gesehen, die alle zum Positionieren der Elemente auf der Webseite sagen, aber keiner von ihnen hat erzählt, wie Bilder auf der Grundlage von Bildschirmauflösungen platziert werden.

danke ich voraus.

bearbeitete Frage

ich habe folgenden Code für HTML verwendet 

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

jetzt habe ich Bilder in Assets/Www/Bilderordner. Dieser Ordner besteht aus 2 Bildern der gleichen Auflösung app_logo.png und company_logo.png und 2 Bildern mit einer höheren Auflösung app_logo_big.png und company_logo_big.png. Jetzt werde ich durch Medienabfragen die Bildschirmgröße kennen und die Stile anwenden kann img src nicht von css ändern. Wie verwende ich nun diese Bilder mit unterschiedlicher Auflösung?

20
prateek

Dann ändern Sie das Bild dynamisch über 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');  
  }
}

Durch CSS: Verwenden Sie Medienabfragen für unterschiedliche Auflösungen:

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

Wenn Sie filtern möchten,

ORIENTIERUNG - and (orientation: landscape)

Gerätebreite and (min-device-width : 480px) and (max-device-width : 854px)

Beispiel:

@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

Das Erstellen von Unterstützung für weitere Größen ist ein Problem. Sie können dies jedoch mit @media-Abfragen in CSS beheben. Überprüfen Sie diesen Beispielcode:

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

Mit diesem Code können Sie Unterstützung für alle Geräte hinzufügen. Aktivieren Sie diesen Link, um mehr Code für mehr Browser zu erhalten.

Funktionen, die Sie verwenden können:

  • Breite und Höhe: (min-device-width : 768px) and (max-device-width : 1024px)
  • Orientierung: (orientation: landscape) oder (orientation: portrait)
  • Pixelverhältnis des Geräts: (-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>

Ändern Sie img in span und fügen Sie IDs hinzu.

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

Mit diesem Beispiel können Sie Ihren Code ändern und korrigieren. Ich hoffe das hilft!

Sie können dies auch mit einem handlebars helper tun, der weniger Code benötigt und meiner Meinung nach die empfohlene Methode ist:

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


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

img/low/ und img/high enthalten Bilder in unterschiedlichen Auflösungen mit demselben Namen.

Dann in deiner Vorlage:

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

Natürlich müssen Sie die Bildschirmgröße entsprechend den Geräten einstellen, die Ihre App-Ziele haben. 

Anhang: Wenn Sie im Cordova-Browser kein 1: 1-Pixel-Mapping haben (was NICHT empfohlen wird - Ihre Bilder wirken unscharf/unscharf). screen.width unterscheidet sich von der Breite des Browsers (window.innerWidth) und Sie müssen $(window).width() oder window.innerWidth verwenden. Sie können möglicherweise eine falsche Zuordnung mithilfe von Medienabfragen beheben. 

3
biodiv

Ich habe festgestellt, dass ich anfangen musste, Unterstützung für die Pixelverhältnisse von 0,5, 1, 1,3, 1,5, 2 und 3 mithilfe dieser Medienabfragen hinzuzufügen.

Hinweis: Ich verwende -webkit-min-Device-Pixel-Verhältnis anstelle von -webkit-Device-Pixel-Verhältnis. Ich hatte festgestellt, dass auf einem meiner Testgeräte (Galaxy Tab 3 - 8 ") das Pixel-Verhältnis war 1.3 und nahm keine der spezifischen Stile auf, die ich in meiner Phonegap-App festgelegt hatte. 

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

Ich denke, Sie müssen die gemeldeten Bildschirmabmessungen durch die Bildschirmdichte teilen, um die Breiten- und Höhenabmessungen der Medienabfrage zu erhalten.

0
Steven Benjamin