Pantalla retina UIWebView y iPhone 4

Question

Tengo un UIWebView que muestra texto local e imágenes. O he cometido un error en alguna parte, o el UIWebView no maneja automáticamente el sufijo @2x para imágenes de alta resolución.

Entonces, mi pregunta es si alguien ha cargado con éxito imágenes de @2x en un UIWebView a través de los medios normales, o ¿tengo que hacer algo especial? ¿Puedo de alguna manera detectar si mi usuario tiene una pantalla Retina?

Answer 1

según su petición ...

de prueba para la funcionalidad. Si desea saber si necesita mostrar una imagen de retina o una imagen normal, pruebe si su dispositivo tiene una pantalla Retina, no es que sea de un modelo en particular (asegure su aplicación lo mejor que pueda, significa que tiene que cambiar menos cosas cuando sale un nuevo modelo). Para ello, puede utilizar el siguiente código de ejemplo:

if([[UIScreen mainScreen] respondsToSelector:@selector(scale)] && 
    [[UIScreen mainScreen] scale] == 2.0) 
{ 
    /* We have a retina display. */ 
} 
else 
{ 
    /* We do not. */ 
} 

Este código es seguro, a partir del momento en que escribí esto, en todos los modelos y en todas las versiones de firmware. También será seguro en versiones futuras hasta que Apple derogue el método scale, lo que puede que nunca suceda.

Más sobre su pregunta, no sé cómo hacer eso en una vista web sin tener previamente las ubicaciones de una imagen de retina y una imagen no retina. Una vez que tengo esa información, la he usado (en el pasado) para reemplazar algún texto centinela conocido que la página web esperaba que reemplazara, como en el caso de poner algo en el código HTML que decía: {{{image_location}}} donde podía descargar el HTML datos, hágalo en formato de cadena, luego haga un reemplazo en esa cadena reemplazando ese texto, con la URL de la imagen @ 2x si estamos en una pantalla Retina, con el factor de escala apropiado, o la imagen de tamaño normal si no (usando el código anterior).

Espero que esto ayude si nadie viene con una solución mejor.

Answer 2

En cuanto a la detección, puede usar this code sample. Acabo de actualizar para detectar También iPhone 4.

Answer 3

Sólo hacen siempre:

<img src="image@2x.png" width={half-width} /> 

de referencia CSS imágenes de fondo, utilice-fondo-webkit tamaño a la mitad del tamaño de ellos.

Desventaja: los dispositivos sin retina descargarán imágenes de gran tamaño.

Answer 4

Supuse que esto también se puede lograr utilizando alguna magia CSS o Javascript para mostrar solo la imagen adecuada. La idea principal es la inserción de las dos imágenes, normal y alta resolución y luego establecer el atributo CSS pantalla a ninguno de las imágenes a la máscara:

archivo HTML

<link href="default.css" rel="stylesheet" media="screen" type="text/css" /> 
<link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" /> 

. ..

<img src="image.png" width="..." height="..." class="normalRes" />  
<img src="image@2x.png" width="..." height="..." class="highRes" /> 

Archivo CSS: valor predeterminado.css archivo

.normalRes { display:block } /* or anything else */ 
.highRes { display:none } 

CSS: highresolution.css

.normalRes { display:none } 
.highRes { display:block } /* or anything else */ 

tengo prueba un poco y funcionó bien. Necesita más pruebas ahora que he encontrado la solución aquí: http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport

ACTUALIZACIÓN 2012-06-24

Aquí hay otra solución sin necesidad de highresolution.css archivo.
Agregue el siguiente código en default.css.

@media all and (-webkit-min-device-pixel-ratio: 2) { 

    .normalRes { display:none } 
    .highRes { display:block } 

    ... 

Answer 5

La mejor solución es utilizar las imágenes de alta resolución para WebViews tanto retina y no basados ​​en la retina. Luego, configure el tamaño de la imagen (en puntos) usando el atributo de ancho y alto.

<img src="hi-res-icon.png" width="10px" height="10px" /> 

Answer 6

Utilizo este hack de Javascript para cargar imágenes escaladas cuando se ejecuta en un dispositivo Retina. Cambiará el atributo src y width en todas las imágenes para usar la imagen escalada correspondiente. Tenga en cuenta que solo he probado esto con imágenes locales.

Ajuste display: none y luego reinícielo en las costuras de carga de la imagen para corregir algunos parpadeos. También tenga en cuenta que este código probablemente no sea compatible con otros navegadores que WebKit.

document.addEventListener("DOMContentLoaded", function() { 
    var scale = window.devicePixelRatio; 
    // might want this to be scale != 2 
    if (scale == undefined || scale == 1) { 
    return; 
    } 

    var re = /^(.*)(\..*)$/; 
    var images = document.getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) { 
    var img = images[i]; 
    var groups = re.exec(img.src); 
    if (groups == null) { 
     continue; 
    } 

    img.style.setProperty("display", "none"); 
    img.addEventListener("load", function(event) { 
     event.target.width /= scale; 
     event.target.style.setProperty("display", ""); 
    }); 
    img.src = groups[1] + "@" + scale + "x" + groups[2]; 
    } 
}); 

Consejos es agregar esto a un archivo llamado p. scaledimages.js y luego utilice

<script type="text/javascript" src="scaledimages.js"></script> 

Asegúrese de que el archivo js-aparece en "Copiar Bundle Recursos" y no en "Fuentes compilados" en sus objetivos "Construir fases". Las costuras predeterminadas de Xcode detectan los archivos Javascript como algo que le gusta compilar. También tenga en cuenta que la secuencia de comandos actual podría romper las cosas si devicePixelRatio resultan ser 3 o mayores en el futuro, una precaución podría ser cambiar (scale == undefined || scale == 1) a scale != 2 solo cargue @2x por el momento.

Actualización: También hay un jQuery-Retina-Display-Plugin que hace algo similar, pero requiere que establezca el atributo y costuras width utilizar también una solicitud HEAD para ver si la imagen existe, no está seguro de cómo funcionará para archivos locales.