Retina telefon ekranlarına yüksek çözünürlük sağlayan teknolojidir. Retina teknolojisiyle Apple sayesinde tanıştık.Apple’ın piyasaya sürdüğü Iphone 4 ve sonrasında ürettiği telefonların ekranına retina teknolojisini entegre etti.Durum böyle olunca düşük çözünürlükte olan web sitelerinin de yeniden dizayn edilmesi gibi bir sorun ortaya çıktı.Nedeni bu web sitelerinin çözünürlükleri retina ekranlar için düşük kalmasıydı.

Resimde de anlaşılacağı üzere fark ortadadır.
Web site içinde tüm görsel öğelerin optimizasyonunun düzgün bir şekilde yapılmalıdır.Bu optimizasyon ne kadar iyi olursa sitenin performansı,ziyaretçi sayısı ve sitenin açılma hızı da o kadar iyi olacaktır
Peki Bunun İçin Nasıl Bir Kodlama Yapılmalıdır?
Çözümümüz çift taraflı olmalıdır.Hem retina ekran olan hem de olmayan telefonlar için ortak bir yapı kurulmalıdır.Yani düşük çözünürlük’te bir cihaz olduğunda server’den düşük kullanım,retina ekranlar için de server’den yüksek kullanım yapacak şekilde dizayn edilmelidir.Bunu da yapacak en iyi araç şüphesiz JavaScript’tir.

Retina.Js
Retina.js basit , hızlı ve açık kaynak kodlu bir script’tir.Diğer bir güzel yanı ücretsiz olmasıdır.Yaptığı iş ise cihaz yüksek çözünürlük istiyorsa serverden yüksek çözünürlüklü grafiği çeker tam tersi düşük çözünürlükteyse serverden düşük olan grafiği çeker.Bunun için de serverda hem yüksek hem de düşük çözünürlüklü grafikleri bulundurmalıyız.
Kullanımı
Retina.js dosyasını indirip web sayfanızın bulunduğu klasöre yani ana dizinine kopyalayın
<script type=”text/javascript” src=”/javascripts/retina.js”></script> bu kod satırını ekleyin.
İşlem tamam.
Retina Hakkında Bilgi
Diğer ekran tiplerine göre daha kaliteli bir görüntü kalitesi sağlar.Bu netliği sağlayan daha çok piksel sayısıdır.Birim başına ne kadar çok piksel düşerse o kadar net olması sağlanıyor.Retina Display teknolojisi ise insan gözünün görebileceği en mükemmel bir değer demektir.Iphone 4 326 DPI gibi bir çözünürlüğe sahip.İnsan gözü için yeterli mükemmelliği fazlasıyla sağlıyor..