Retina ekranlar için css ayarı

Selam arkadaşlar.

Retina ekranlarda gözükmesi için logonun büyük boyutlusunu ayarladım fakat Macbook'da gözükürken iPhone'da gözükmüyor retina için ayarladığım logo. Nasıl yapabilirim acaba? Başka şeyler de denedim olmadı.

Kullandığım kod:

@media (min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.site-basligi>a {
background: url(görselin url'si) no-repeat;
background-size: 276px 60px;
}
}

Javascript ile, cihazın özelliğini alıp;
Body tag'ine Class Ekleyebilirsin. daha sonra;
body.iphone.device { /*code*/ }

Çalışması gerekiyor. Aşağıdaki kod Retina 15'' macbook pro'da çalışıyor.

Edit : Pardon ben macbook'da görünmüyor diye okudum gönderiyi @misal; arkadaşın verdiği kod çalışacaktır.

resmi büyük boyutlu ayarlayıp (Örn: 1000px X 500px) HTML üzerinden image tagına width, height vermeyi deneyin.

<img src="..." width="250" height="200" />gibi

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {  .logo {    background-image: url(img/logo@2x.png);    -moz-background-size: 50px 35px;    -o-background-size: 50px 35px;    -webkit-background-size: 50px 35px;    background-size: 50px 35px;    margin-top:19px;  }}

Ayrıca şurayı da incelemenizi tavsiye ederim;
https://fatihhayrioglu.com/resimleri...hale-getirmek/

logo icon vs için svg format kullanabilirsin.

Cevap veren arkadaşlara çok teşekkürler. R10'un kurallarına bakayım dedim ve ilk denemede halloldu. Aşağıdaki gibi yazdım kuralı. Teşekkürler cevaplarınız için, çözülmüştür. min-device-pixel-ratio tanımlamasını kaldırdım.

@media not all, only screen and (min-resolution: 192dpi) {
// css tanımlamaları
}