php - Detectar la visualización de la retina(HD) en el lado del servidor.

retina-display

Question

Encontré muchas preguntas sobre Retina Display, pero ninguna de las respuestas estaba en el lado del servidor.

Me gustaría entregar una imagen diferente según la pantalla, por ejemplo (en PHP):

if( $is_retina)
    $thumbnail = get_image( $item_photo, ''thumbnail_retina'' ) ;
else
    $thumbnail = get_image( $item_photo, ''thumbnail'' ) ;

¿Puedes ver una manera de lidiar con esto?

Solo puedo imaginar una prueba en JavaScript, configurando una cookie. Sin embargo, esto requiere un intercambio inicial para configurarlo. ¿Alguien tiene una mejor solución?

Código de configuración de la cookie:

(function(){
  if( document.cookie.indexOf(''device_pixel_ratio'') == -1
      && ''devicePixelRatio'' in window
      && window.devicePixelRatio == 2 ){

    document.cookie = ''device_pixel_ratio='' + window.devicePixelRatio + '';'';
    window.location.reload();
  }
})();

Answer 1

Bien, ya que parece que no hay mejor manera por el momento, aquí está mi solución que combina JS, PHP y Cookies.

Espero que haya mejores respuestas en el futuro.

<?php
    if( isset($_COOKIE["device_pixel_ratio"]) ){
        $is_retina = ( $_COOKIE["device_pixel_ratio"] >= 2 );

        if( $is_retina)
            $thumbnail = get_image( $item_photo, ''thumbnail_retina'' ) ;
        else
            $thumbnail = get_image( $item_photo, ''thumbnail'' ) ;

    }else{
?>
<script language="javascript">
(function(){
  if( document.cookie.indexOf(''device_pixel_ratio'') == -1
      && ''devicePixelRatio'' in window
      && window.devicePixelRatio == 2 ){

    var date = new Date();
    date.setTime( date.getTime() + 3600000 );

    document.cookie = ''device_pixel_ratio='' + window.devicePixelRatio + '';'' +  '' expires='' + date.toUTCString() +''; path=/'';
    //if cookies are not blocked, reload the page
    if(document.cookie.indexOf(''device_pixel_ratio'') != -1) {
        window.location.reload();
    }
  }
})();
</script>
<?php } ?>

en function.php:

add_action( ''init'', ''CJG_retina'' );

function CJG_retina(){

    global $is_retina;  
    $is_retina = isset( $_COOKIE["device_pixel_ratio"] ) AND $_COOKIE["device_pixel_ratio"] >= 2;
}

Luego después puedo usar el siguiente GLOBAL:

global $is_retina; o $GLOBALS[''is_retina''];

Answer 2

Como no especifica para qué caso de uso exacto necesita esto y realmente no veo un caso de uso para el servidor, sabiendo qué resolución quiere el cliente en sus imágenes (en mi opinión, el cliente debería decidir) aquí está mi sugerencia :

Use algo como Retina.js o use el atributo srcset <img src="low-res.jpg" srcset="medium-res.jpg 1.5x, high-res.jpg 2x">

De esta manera también podría aprovechar el almacenamiento en caché del navegador de las imágenes. que no puede hacer si tiene una url para dos tamaños de imagen diferentes. Incluso si se trata de un almacenamiento en caché de imágenes creado / actualizado automáticamente, se utilizan los encabezados etag o modificados por última vez.

Answer 3

No estoy seguro de cómo, pero la forma pura de PHP de resolver esto sería usar get_browser que devuelve la versión del navegador y algunas capacidades. Esto puede ser capaz de proporcionarle cierta información que PUEDE llevar a si se está ejecutando en una retina.

http://php.net/manual/en/function.get-browser.php

Además, puede consultar $_SERVER[''HTTP_USER_AGENT''] que le informará sobre el dispositivo. entonces necesitas una lista de dispositivos que tengan retinas y hacer una comparación para obtener la respuesta.

Hacer su detección de retina en el JS es probablemente mucho más fácil e infalible.