,

Retinásítás

Mivel nagy Apple kedvelő vagyok és használok pár készüléket is, így muszáj volt „retinásítani” a blogom. Ez annyiból áll, hogy néhány képet négyszer akkorára kell szerkesztenem és, ha retinás eszközt észlel a weboldal akkor kicserélni azokra a nagyobb képekre. Ehhez szükség volt egy javascript-re ami kicseréli a képeket, ha észleli az eszközt. Egyszerű a használat nagyon, először is helyezzük el a „retina.js”-t egy mappába és hívjuk meg a szokásos kóddal:[/vc_column_text][vc_column_text]<script type=”text/javascript” src=”/scripts/retina.js”></script>

Majd a .”css” fájlunkban a retinásításra váró div alá írjuk be ezt:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.valamilyendiv {
background: url(‘kepek/nagyattila-2x.png’) no-repeat;
background-size: 205px 51px;
}
}

A lényeg, hogy ha van egy 205*51-es méretű képünk, ezt meg kell csinálnunk négyszer ekkorában, tehát 410*102-ben. A duplaméretű képet a css lecsökkenti 205*51-re, így szép élesen fog megjelenni retina eszközön.

nagyattila
nagyattila.org nem retina logó
nagyattila.org retinásított logó
nagyattila.org retinásított logó

Hozzászólások

Vélemény, hozzászólás?

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

Ez az oldal az Akismet szolgáltatást használja a spam csökkentésére. Ismerje meg a hozzászólás adatainak feldolgozását .