iPhone4 PHP ve/veya JavaScript ile retina görüntüleme algılaması

Question

Bir kullanıcı siteme geldiğinde retina ekranı (veya benzeri) olan herhangi bir aygıtı (şu anda sadece iPhone4) algılayan bir algılama komut dosyası oluşturuyorum. Çözünürlük daha büyük olduğu için, daha yüksek çözünürlüklü görüntüleri/grafikleri zorlamalıyım. Bulabildiğim tek çözüm (PHP ve JavaScript kullanarak), devicePixelRatio'u algılayıp bir tanımlama bilgisi belirlemektir.

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

Herkes bunu daha iyi bir yöntem rastlamak veya bu senaryoyu geliştirmek herhangi bir öneriniz var Has: İşte kullanıyorum kodudur. Bu betik işe yarıyor, sadece kirli hissediyor.

Answer 1

here açıklandığı gibi CSS3 medya sorgularını kullanabilirsiniz, ancak bu yalnızca istemci tarafında ek CSS kuralları eklemenize izin verir, görüntü yolu sunucu tarafını ayarlamaz. Bu sınırlı sayıda statik görüntüye sahip bir site için iyi çalışır.

Answer 2

Bir sitede retina görüntüleme için destek eklemem gerektiğinde çok "düşük teknoloji" çözümü uyguladım: Tüm resimlerin boyutunu ikiye katlayıp boyutlarını% 50 oranında gösterecek şekilde ayarladım.

Ne yazık ki, her cihaz desteklemese bile yüksek çözünürlüklü görüntüler yüklüyordu, ama endişelenecek çok fazla grafikim yoktu, bu yüzden benim için iyi bir çözümdü.

Answer 3

Brian Cray tek satırlık JavaScript cevabı var:

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

Bu kolay:

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

Answer 4

Brian Cray cevap yanlış gibi görünüyor.

javascript bunu yapmanın doğru yolu: Hiçbir javascript kullanılabilir olduğunda varsayılan geri düşen, senaryoyu kullanarak doğru görüntü için tek bir istekte kullandığım bir tekniği var

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

Answer 5

. (yukarıdaki Simon'un Yanıt başına gibi) yüksek çözünürlüklü görüntüleri gerektiriyorsa bir <Noscript> etiketi

içindeki resim noscript etiketinin içine img src içeriğini okumak ve daha yüksek yolunu değiştirmek Algılama

1. Yeri resme göre res.
2. <noscript> etiketini kaldırın.

güvenilir şekilde here