Soru sunucu tarafındaki retina (HD) göstergesini algılar


Retina Ekranı hakkında birçok soru buldum, ancak cevapların hiçbiri sunucu tarafında değildi.

Ekrana göre farklı bir resim sunmak istiyorum, ex (PHP):

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

Bununla başa çıkmanın bir yolunu görebiliyor musun?

Bir testi yalnızca JavaScript’te hayal edip bir Çerez ayarlayabilirim. Ancak bu, bunu ayarlamak için bir başlangıç ​​değişimi gerektirir. Daha iyi bir çözümü olan var mı?

Çerez ayar kodu:

(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();
  }
})();

18
2018-03-05 21:30


Menşei


HTTP isteğinin kullanıcının ekran çözünürlüğünü veya DPI değerini değerlendirmek için yeterli bilgi içerdiğini düşünmüyorum. Daha yeni kontrol ettim. - John Dvorak
Çözümünüzü kullanın - daha iyi bir hayal edemezsiniz - Philipp
yorumcular örnek yüzünden bir wordpress sorusu olduğunu düşündü, örnek işlevi değiştirdim. - chriscatfr


Cevaplar:


Şu an için daha iyi bir yol yok gibi görünüyor, burada JS, PHP ve Çerezleri birleştiren çözüm benim.

Umarım gelecekte daha iyi cevaplar olacaktır.

<?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 } ?>

function.php içinde:

add_action( 'init', 'CJG_retina' );

function CJG_retina(){

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

Sonra aşağıdaki GLOBAL'i kullanabildikten sonra:

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


17
2018-03-05 21:48



Vay, bu güzel! - Daniel H


Tam olarak ne kullanacağınızı belirtmediğiniz için, buna ihtiyacınız var ve ben gerçekten istemcinin hangi çözümün istemiş olduğunu bilerek sunucu için bir kullanım durumu görmüyorum (bence müşteri karar vermelidir) burada benim öneri :

Gibi bir şey kullan Retina.js veya srcset özelliğini kullan <img src="low-res.jpg" srcset="medium-res.jpg 1.5x, high-res.jpg 2x">

Bu şekilde, görüntülerin tarayıcıda önbelleğe alınmasını da kullanabilirsiniz. İki farklı görüntü boyutu için tek bir URL'niz varsa, bunu yapamazsınız. Otomatik olarak oluşturulan / güncellenmiş bir görüntü önbelleği, son değiştirilmiş veya etag başlıklarını kullanarak çalışıyor olsa bile.


7
2018-05-06 17:36



Retina.js ile srcset arasında herhangi bir tercih var mı? - rogerdpack
2013 yılında srcset bekleniyordu veya çok yeniydi. Yeni Retina bilgisayarlarında bile kullanamazsın. Şimdi 2017 yılında daha iyi bir seçim. - chriscatfr
Ben srcset tercih ederim, çünkü javascript olmadan çalışır. Ayrıca bir retina görüntüsü ile hangi img etiketini kullanmak istediğinizi ve hangi resmin bulunmadığını kontrol edebilirsiniz. Ancak tüm görüntüler için bir retina görüntüsü sağlıyorsanız ve tam uyumluluk istiyorsanız retina.js gibi bir javascript çözümü size daha iyi hizmet verecektir. - smurfy
Ayrıca bakınız stackoverflow.com/q/19689715/32453 Diğer yollarla javascript veya CSS (client-stuff) benzer şekilde, takipçilere not olarak. - rogerdpack


Tam olarak nasıl emin değilim, ama bunu anlamanın saf PHP yöntemi get_browser tarayıcı sürümünü ve SOME yeteneklerini döndürür. Bu size bazı bilgileri anlatabilir. MAYIS AYI retinanın üzerinde çalışıp çalışmadığına yol açar.

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

Ayrıca, bakabilirsiniz $_SERVER['HTTP_USER_AGENT'] Bu size cihaz hakkında bir şeyler söyleyecektir. Daha sonra retina olan ve cevap almak için karşılaştırma yapan bir Cihazlar listesine ihtiyacınız vardır.

JS'de retina tespitinizi yapmak muhtemelen çok daha kolay ve kusursuzdur.


1
2018-03-05 21:48