2010-09-06 28 views
8

Tengo una vista web que muestra una imagen, como se muestra en el siguiente código. El paquete también tiene un [email protected] con dimensiones de 128x128 para usar en el iPhone4. El [email protected] nunca se muestra. ¿Hay alguna manera de mostrar cualquiera de los dos, dependiendo de si es un iPhone o un iPhone4?Imágenes de alta resolución en uiwebview

<img src="DGT64.png" width="64" height="64" align="left" style="padding:2px;"/> 

Respuesta

5

No creo que la @2x truco funciona con el contenido web. Aunque suena realmente útil, ciertamente enviaría un error a Apple para solicitarlo.

Si está generando el HTML anterior desde su aplicación, entonces creo que la mejor manera para ahora será detectar si está ejecutando en un dispositivo Retina y luego ajustar el nombre de la imagen manualmente.

Puede detectar la pantalla Retina haciendo algo como esto:

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) { 
    if ([[UIScreen mainScreen] scale] == 2) { 
     // Use high resolution images 
    } 
} 

(Tomó ese código de respuesta que encontré aquí en SO)

+0

Gracias. No estoy generando el HTML de la aplicación, pero probablemente pueda tener 2 archivos pathForResource diferentes y, en base a la prueba anterior, usar el apropiado. Lo probaré. –

+0

No es probable que suceda sin una etiqueta META (no estándar) o similar: no es una buena idea duplicar la cantidad de solicitudes que está recibiendo en un servidor para obtener imágenes más bonitas, especialmente debido a que la mayoría de los sitios web (es decir, Desktop sitios) se renderizarán en escala de 1/2 o 1/3 de todos modos. –

+0

No se ha hecho aún, pero este es el enfoque que estoy tomando. Puede que no haya entendido lo que significaba "si está generando el ... HTML de su aplicación" y, por lo tanto, puede haber confundido a tc. El HTML reside en mi paquete. Está arreglado; utilizado para que la aplicación muestre texto formateado en una UIWebview. No hay servidores involucrados. No estoy generando el HTML sobre la marcha, así que no puedo sustituir un nombre y dimensiones de imagen diferentes, pero es bastante fácil tener un segundo archivo HTML con referencias de imágenes de alta resolución y dimensiones para el iPhone4 y usar el código sugerido anteriormente para decidir qué pathForResource usar. –

2

Actualmente la mejor manera de hacerlo es haciendo referencia a sus imágenes en su archivo CSS usando la propiedad background-image. Luego, puede usar un archivo CSS especial que solo es cargado por dispositivos con pantallas de alta resolución para anular estas propiedades.

Consulte this blog post para obtener más información.

14

La manera de hacerlo es con fondos CSS. Simplemente inserte todas sus cosas 2x en una subsección en CSS. La clave también es establecer -webkit-background-size. Aquí hay un ejemplo de la porción del CSS (tanto retina como no) para un div con el id Ampersand que actúa como una imagen.

div#Ampersand { 
    background: url('AmpersandBurned.png'); 
    width:43px; 
    height:97px; 
    float:left; 
    -webkit-background-size: 43px 97px; 
} 

@media screen and (-webkit-device-pixel-ratio: 2) { 
    div#Ampersand { 
    background: url('[email protected]'); 
    width:43px; 
    height:97px; 
    float:left; 
    } 
} 
+1

¡Me salvaste hombre! No pude encontrar la solución real de mostrar imágenes Retina en CSS – Volatil3

Cuestiones relacionadas