property - meta tags html5




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

A continuación, cambie dinámicamente la 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: use consultas de medios para diferentes resoluciones:

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

ORIENTACIÓN - and (orientation: landscape)

ANCHO del dispositivo 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 */
}

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 la carpeta 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 receptivo 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 avanzo.

pregunta editada

He usado el siguiente código para 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>

ahora tengo imágenes dentro de la carpeta assets / www / pictures. 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


Crear soporte para más tamaños es un problema, pero puede solucionarlo con @media consultas 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 soporte para todos los dispositivos. Consulte este enlace para obtener más código para más navegadores

Funciones que puedes usar:

  • Ancho y alto: (min-device-width : 768px) and (max-device-width : 1024px)
  • Orientación: (orientation: landscape) o (orientation: portrait)
  • Proporción de píxeles del 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>

Cambia img a span y agrega IDs.

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, puedes cambiar tu código y arreglarlo. ¡Espero que esto ayude!


Descubrí que tuve que comenzar a agregar compatibilidad para proporciones de píxeles de 0.5, 1, 1.3, 1.5, 2 y 3 usando estas consultas de medios.

Tenga en cuenta que 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 de 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/[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;
    }   
}

También puede hacer esto utilizando un asistente de handlebars , que requiere menos código 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 que img/low/ e img/high contienen imágenes en diferentes resoluciones con el mismo nombre.

Luego en tu plantilla:

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

Por supuesto, debe establecer los valores de tamaño de pantalla de acuerdo con los dispositivos a los que apunta su aplicación.

Apéndice: Si no tiene una asignación de píxeles 1: 1 en el navegador cordova (que NO es recomendable, las imágenes tendrán un aspecto borroso / desenfocado) screen.width diferirá del ancho de los navegadores (window.innerWidth) y tendrá que usar $(window).width() o window.innerWidth . Es posible que pueda corregir una asignación incorrecta utilizando consultas de medios.





responsive-design