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.
Vélemény, hozzászólás?