compatible con resolución múltiple y densidad de imágenes en phonegap

Question

Soy nuevo en phonegap y frente a un problema, estoy haciendo una aplicación de phonegap que se ejecutará en múltiples dispositivos de plataforma de diferentes tamaños de pantalla y diferente resolución de pantalla, así que tengo que cargar imágenes de diferente resolución dependiendo de la resolución de la pantalla.

esto se puede lograr en Android simplemente colocando sus imágenes de diferente resolución en las carpetas hdpi, mdpi y ldpi y (android) obtiene imágenes automáticamente dependiendo de la resolución de la pantalla del dispositivo. Pero cómo hacer esto en phonegap.

He visto muchos artículos sobre diseño web sensible que todos dicen sobre el posicionamiento de los elementos en la página web pero ninguno de ellos ha explicado cómo colocar imágenes en función de las resoluciones de pantalla.

gracias i advance.

pregunta editada

he utilizado siguiente código HTML para

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

ahora tengo las imágenes dentro de los activos de la carpeta/www/fotos. esta carpeta consta de 2 imágenes de la misma resolución app_logo.png y company_logo.png y 2 imágenes de resolución más alta app_logo_big.png y company_logo_big.png ahora a través de consultas de medios sabré el tamaño de la pantalla y aplicaré los estilos, pero hasta donde yo sé, no puede cambiar img src de css. Entonces, ¿cómo voy a usar estas imágenes de diferente resolución

Answer 1

A continuación, cambiar dinámicamente imagen a través de 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'); 
    } 
} 

A través de CSS: Uso de Medios Queri es diferente de Resolución:

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 se quiere filtrar,

ORIENTACIÓN - and (orientation: landscape)

Dispositivo ANCHO and (min-device-width : 480px) and (max-device-width : 854px)

Ejemplo:

@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

Crear soporte para más tamaños es un problema, pero puede solucionarlo con @media queries en CSS. Verifique este código de ejemplo:

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

Con este código puede agregar compatibilidad para todos los dispositivos. Check this link for getting more code for more browsers

funciones que se pueden utilizar:

• anchura y altura: (min-device-width : 768px) and (max-device-width : 1024px)
• Orientación: proporción de píxeles (orientation: landscape) o (orientation: portrait)
• Dispositivo: (-webkit-device-pixel-ratio: 1.5)

EDITAR:

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> 

Cambio img en span y añadir identificadores.

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

Con este ejemplo, usted puede cambiar su código y solucionarlo. ¡Espero que esto ayude!

Answer 3

Yo creo que hay que dividir las dimensiones de la pantalla reportados por la densidad de pantalla para conseguir la altura y anchura de la consulta de los medios.

Answer 4

También puede hacerlo utilizando un ayudante handlebars, lo que menos código intensiva y en mi opinión el método recomendado:

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


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

mientras img/low/ y img/high contienen imágenes en diferentes resoluciones con el mismo nombre.

Luego, en su plantilla:

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

Por supuesto, usted tiene que fijar los valores de tamaño de pantalla de acuerdo con los dispositivos de sus objetivos de aplicaciones.

Apéndice: Si usted no tiene 1: 1 de mapeo de píxeles en el navegador Cordova (que no se recomienda - sus imágenes tendrán un aspecto borroso/desenfoque) screen.width será diferente de ancho navegadores (window.innerWidth) y tienes que usar $(window).width() o window.innerWidth. Es posible que pueda corregir una asignación incorrecta utilizando consultas de medios.

Answer 5

He encontrado que he tenido que empezar a agregar compatibilidad para proporciones de píxel de 0.5, 1, 1.3, 1.5, 2 y 3 usando estas consultas de medios.

Nota Estoy utilizando -webkit-min-device-pixel-ratio en lugar de -webkit-device-pixel-ratio. Encontré que en uno de mis dispositivos de prueba (Galaxy Tab 3 - 8 ") la relación de píxeles era 1.3 y no recogía ninguno de los estilos específicos que había configurado en mi aplicación de facsímil.

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