Detección de retina iPhone4 con PHP y/o JavaScript

Question

Estoy creando un script de detección que olfatea cualquier dispositivo (actualmente solo iPhone4) con una pantalla Retina (o similar) cuando un usuario llega a mi sitio. Debido a que la resolución es mayor, necesito enviar imágenes/gráficos de mayor resolución. La única solución que puedo encontrar (usando PHP y JavaScript) es detectar el devicePixelRatio y configurar una cookie. Aquí está el código que estoy usando:

<?php 
    $imgPath = "images/"; 
    if(isset($_COOKIE["imgRes"])){ 
     $imgRes = $_COOKIE["imgRes"]; 
     if($imgRes >= 2){ 
      $imgPath = "images/highRes/"; 
     } 
    } else { 
?> 
    <script language="javascript"> 
     var the_cookie = "imgRes="+window.devicePixelRatio+";"+the_cookie; 
     document.cookie = the_cookie; 
     location = '<?=$_SERVER['PHP_SELF']?>'; 
    </script> 
<?php 
    } 
?> 

Alguien ha encontrado una mejor forma de hacer esto o tiene alguna sugerencia para mejorar este script. Este script funciona, simplemente se siente sucio.

Answer 1

Puede utilizar las consultas de medios CSS3 como se describe here, pero esto solo le permitirá agregar reglas CSS adicionales del lado del cliente, no ajustar la ruta de la imagen del lado del servidor. Esto funcionaría bien para un sitio con un número limitado de imágenes estáticas.

Answer 2

Implementé una solución muy "baja tecnología" cuando necesité agregar soporte para la visualización de la retina en un sitio: Doblé el tamaño de todas las imágenes y las configuré para mostrar al 50% de su tamaño.

Desafortunadamente, significaba que cada dispositivo estaba cargando imágenes de alta resolución, incluso si no las soportaba, pero no tenía muchos gráficos de los que preocuparme, así que fue una buena solución para mí.

Answer 3

Brian Cray tiene una sola línea de JavaScript respuesta:

http://briancray.com/2011/05/05/detect-retina-displays-with-javascript/

Es así de fácil:

var retina = window.devicePixelRatio > 1 ? true : false; 

Answer 4

Brian Cray respuesta parece ser falsa.

La forma correcta de hacer esto en javascript es:

var retina = window.devicePixelRatio && window.devicePixelRatio >= 2; 

Answer 5

Tengo una técnica que utilizo lo que hace que una única solicitud para la imagen correcta mediante la escritura, cayendo de nuevo a un valor predeterminado cuando no hay javascript está disponible.

1. lugar de su imagen dentro de una etiqueta
2. <noscript> Detectar si necesita imágenes de alta resolución (de acuerdo con la respuesta de Simón arriba) leer el contenido de la img src dentro de la etiqueta noscript y modificar la ruta de acceso a la mayor res imagen en consecuencia.
3. Quite la etiqueta <noscript>.

Usted necesitará un pequeño polyfil para leer de forma fiable el contenido de las etiquetas noscript en todos los navegadores (IE8) y por debajo de la cual se pueden encontrar here