A retina js használatának előnyei és hátrányai. A képek adaptálása a webdesignhoz Retina kijelzőkön. Retinize It Photoshop Plugin
Az Apple minden új kütyüjével egyre több Retina Display technológiás képernyő jelenik meg. Manapság a Retina kijelzők megtalálhatók az iPhone-on, iPod-on, iPaden és különböző MacBook-modelleken, és a felhasználók teljes száma lenyűgöző. Tanuljuk meg, hogyan hozhat létre egyéni retinaképeket a webhelyéhez, hogy az okosabbnak, fényesebbnek és élesebbnek tűnjön az ilyen típusú nagy teljesítményű képernyőkön.
Miért támogatja a retina képernyőket?
Eleinte nem számítottam arra, hogy a retina képernyővel rendelkező eszközök felhasználóinak száma ennyire lenyűgöző lesz, mert ezt a technológiát viszonylag nemrég kezdték el használni. De aztán az Analytics-fiókomon keresztül átnéztem a mobil kütyük statisztikáit, és arra a következtetésre jutottam, hogy az Apple-termékek minden tekintetben az élen járnak, és mindenekelőtt az iPhone, iPod és iPad között van – és mindegyik működik retina technológia. Ami a 13 hüvelykes vagy 15 hüvelykes, Retina kijelzős MacBook Pro-t illeti, a legnépszerűbb böngészők a Chrome, a Firefox, a Safari és az Internet Explorer. Tehát ha Operát használsz, akkor valószínű, hogy az oldalad potenciális látogatóinak száma kevesebb, mint a Retina eszközök felhasználóinak száma általában (legalábbis a saját oldalam statisztikái szerint).
Hogyan készítsünk retina képeket
Feltételezheti, hogy a Retina képek mentése magasabb PPI-vel történik, de nem ez a lényeg. Mindössze annyit kell tennie, hogy elmenti a Retina képeinek többszörös másolatát kétszer akkora méretben, hogy például egy 200x200 képpont méretű kép 400x400 képpont méretű legyen. Ezek a felnagyított képek ezután eredeti méretükben jelennek meg, lehetővé téve az éles, tiszta grafikát a nagy pixelsűrűségű képernyőkön.
Egyszerűen hangzik, de hogyan fogod elérni ezeket a kinagyított képeket?
Hozzon létre logókat és ikonokat az Illustratorban
Az ideális megoldás retina képek készítésére a vektorgrafika. Ha logója vagy ikonja EPS vagy Ai fájlformátumú, akkor a paraméterei módosíthatók, mielőtt átmásolnák vagy átmásolnák a Photoshopba. Jelöljön meg egy elemet intelligens objektumként, és megőrzi vektor alakját, így megduplázható és külön menthető egyéni retina képként.
Használja a Photoshop vektor funkcióit
A Photoshop elsősorban pixel művészetre épül, de ez nem jelenti azt, hogy nem rendelkezik vektoros képekhez használható funkciókkal. Bármely átformáló eszköz képes vektorréteget létrehozni pixelek helyett, és a Rétegstílus elrendezéshez használt összes effektus továbbra is átméretezhető lesz. Ha megduplázza az elemek léptékét, az összes effektust fel kell léptetni, hogy majdnem pontos, megduplázott másolatot hozzon létre.
Ravasz a képek méretezésére
A valódi tervezők egyik legerősebb alapelve, hogy ne növelje a kép méretét, de ha már létrehozott egy webhelyet, és szeretne egy lépést visszalépni, és retina támogatást szeretne hozzáadni, akkor nincs más hátra, mint minden kép újrakészítése manuálisan. Normális esetben a kép méretezése elmosódott képet eredményez, sok extra vonallal, de van egy kiskaput a Photoshop Képméret menüjében, melynek neve Nearest Neighbor. Ez a funkció segít elkerülni a képek elmosódását, és élesen hagyja a szegélyeket, így hasznos kis ikonok és szilárd tárgyak esetén. Ez nem hoz ugyanazt az eredményt, mint az elem teljes átdolgozása, de egyelőre jó alternatíva.
Mit szólnál egy 200%-ra felnagyított, majd vissza kicsinyített tervezéshez?
Lehet, hogy azt gondolja: "Miért nem hozom létre a saját elrendezésemet dupla léptékben, és utána méretezhetem le az objektumokat szabványos méretekre?" A nyomtatási tervezés elméletében ez működne, de a webdesignban pixel szinten dolgozunk, és tökéletes formákat és vonalakat hozunk létre. Még a képek Photoshopban történő tömörítése is elmosódott képet eredményez, különösen, ha kis ikonokról van szó.
Hogyan kell kódolni a retina grafikát
Miután létrehozta és átvitte 2x másolatát az összes stock képről, elkezdheti hozzáadni azokat a webhelyéhez különféle módokon. Néhány szó a fájlnévről: mentse a retina képeit közvetlenül a képek mappájába ugyanazzal a fájlnévvel, de hozzáadva [e-mail védett] a végén. Például a snarf.jpg a következőre változik: [e-mail védett]
Egyszerű megoldás Javascripttel
A retinaképek működésének legegyszerűbb módja a retina.js szkript használata. A Retina.js kijelöli az összes @2x képet a képlistában, és automatikusan átméretezi őket.
Egy másik lehetőség, ha manuálisan adja hozzá a retina képeit, hogy oldala stílusa CSS formátumban maradjon. A közbenső kérés minimális eszköz-pixel arányt tartalmaz: 2, kétszer akkora pixelsűrűségű objektumok esetén. Így minden képet lecserél a duplázott @2x másolatára, de ne felejtse el visszaállítani a képet az eredeti méretére a background-size paraméterrel.
HTML szövegközi képekhez
A CSS-módszer nagyszerű a háttérképekhez, de a HTML-oldalakba ágyazott képeknél módosítani kell a címkéket. . Csak adja hozzá a @2x képet az eredeti attribútumokhoz, majd használja szélességÉs magasság az eredeti beállítások visszaállításához.
A nagyfelbontású kijelzős készülékek, például az iPhone, iPad, Samsung Galaxy Note II és természetesen a Retina kijelzős MacBook Pro megjelenése után a webfejlesztők és a bloggerek már csak azzal a kérdéssel szembesültek, hogy ezeken a weboldalaik normálisan jelenjenek meg. eszközöket. Az alábbiakban elmagyarázom, hogyan adtam hozzá a nagy felbontású kijelzők támogatását a webhelyeimhez.
Nagy felbontású retina kijelzők
Először is tisztáznunk kell, mik azok a nagyfelbontású kijelzők (a Retina az Apple technológiájában használt nagyfelbontású kijelzők marketingneve). A hagyományos kijelzők, például a 15 hüvelykes laptopokon található képernyők felbontása 1440 × 900. Ez azt jelenti, hogy a monitor mátrix pixelekből (pontokból) áll, és ennek a mátrixnak a hossza 1440 és a magassága 900 pont.
Minden egyszerű, de a nagy felbontású kijelzők megjelenésével minden kicsit bonyolultabbá vált. Annak érdekében, hogy az emberi szem ne pixeleket, hanem képeket lásson, mint egy magazin oldalain vagy egy valódi fényképen, olyan kijelzők jelentek meg, amelyek ugyanazon 15 hüvelyk esetében 2880 × 1800 pixel fizikai felbontásúak. Pontosan kétszer akkora, mint egy hagyományos monitor. A vektorgrafikák, például interfész elemek, betűtípusok, CSS-sel készült keretek weblapokon való megjelenítésekor minden szépnek és csodálatosnak tűnik, de rasztergrafika, vagyis képek megjelenítésénél nem minden olyan gördülékeny.
Probléma a raszteres grafika megjelenítésével
A hagyományos monitorokon 300 x 200 pixeles kép is megjelenik a monitoron - természetesen 300 × 200, ha nincs méretezve. A nagy felbontású mátrixokon a 300x200-as kép kétféleképpen jeleníthető meg.
600×400 pixeles felbontású képként pontosan ugyanannyi helyet foglal el a képernyőn, mint egy normál monitoron.
Mint egy 300 × 200-as felbontású kép, de akkor feleannyi helyet foglal el egy nagyfelbontású monitoron, mint egy normál. Azaz fele akkora lesz, mert a nagyfelbontású kijelzők kétszer akkora felbontásúak, mint a hagyományos kijelzők.
A webhelyek megjelenítésekor az alapértelmezett beállítás az első – minden kép megduplázódik. Emiatt a webhelyen található összes kép: fotók, különösen az ikonok és logók elmosódnak, erre a cikk elején adtam egy példát.
Annak érdekében, hogy webhelye minden eszközön tökéletesen megjelenjen, beleértve a nagy felbontású kijelzőt is, elegendő az összes képet kétszer nagyobb méretben tárolni, és megadni a tényleges megjelenítési méretet html-ben: vagy CSS-ben:
Ez a legegyszerűbb módja, de van egy hátránya - kétszer akkora képeket kap minden felhasználó, beleértve a normál kijelzőket is. Normálisan jelennek meg, csakúgy, mint a normál képek, de az ilyen képek letöltéséhez kétszer akkora forgalomra van szükség, ami rossz a sebesség és az optimalizálás szempontjából, ezért jobb, ha ezt nem teszi meg.
Megoldás
Ahhoz, hogy normál képeket jelenítsek meg a normál kijelzővel és kétszer akkora méretű felhasználók számára, mint a nagy felbontású képek, JavaScript retina.js-t használok. Az eredeti szkript a retinajs.com címen található, de néhány helyen szükség volt változtatásokra, amelyek már jelen vannak a szkriptem verziójában.
Ez a szkript az oldal betöltési idején ellenőrzi, hogy az eszköze nagy felbontású kijelzővel rendelkezik-e, és ha igen, akkor a szerverén ugyanazok a képek vannak-e, de a név @2x-re végződik (ez a szabványos jelölés a kép kétszerese méret, Retina eszközökhöz). Azaz egy src="http://site.com/images-directory/image.png" kép esetén a szkript a http://site.com/images-directory/ címet keresi. [e-mail védett], és ha ez a kép megtalálható, megjeleníti az oldalon, beállítva a kívánt szélességet és magasságot (szélesség és magasság).
A szkript használatához töltse fel a szerverére, és adja meg a lehető legközelebb a záró címkéhez
:
Azok számára, akik (kevesebb) CSS-előfeldolgozót használnak, egy mixin hasznos lehet a másolás-beillesztés elkerülésére.
Ha hibát talál, vagy kérdése van, ne felejtse el megírni a megjegyzésekben.
Ma a Retina kijelzőkkel kapcsolatos i-t fogjuk kipontozni. A legegyszerűbb magyarázat: a Retina egy nagy felbontású kijelző. Azonban nem csak az Apple termékeknek van ilyen kijelzője. A "retina kijelző" csak az Apple által megalkotott kifejezés, a telefonok, táblagépek és monitorok is nagyfelbontású technológiát használnak. Manapság egyre elterjedtebbek az ilyen kijelzők, ezért fontos, hogy olyan weboldalakat és alkalmazásokat készítsünk, amelyek ezeket jól tudják támogatni.
Ezzel hadd magyarázzam el, mi az retina kész képek és miért járnak együtt a reszponzív dizájnnal, és hogyan készítsünk képeket ehhez a nagyon reszponzív dizájnhoz.
Mit jelent a Retina kijelző?
retina kijelző egy Apple márka, ami nagy pixelsűrűségű folyadékkristályos kijelzőket jelent. Az alábbi kép leegyszerűsítve szemlélteti, hogy miben tér el a pixelelrendezés egy normál felbontású kijelző és egy Retina kijelző között. A Retina-kijelzőkkel kétszer annyi képpont érhető el ugyanolyan méretű helyen, mint egy normál kijelzőn. Ez az oka annak, hogy az ikonok vagy a szöveg rosszabbul néz ki az iPad 2-n, mint az iPad 3-on.
Az iPad 3/4 felbontása 264 pixel/inch, az iPhone 4/5 326, míg egy normál monitor körülbelül 100 pixel/inch, ami 2,6-szoros, illetve 3,2-szeres különbséget ad. 2-szer mondták el az egyszerűsítés kedvéért.
Dilemma
A tervezők és a fejlesztők már több megjelenítési típust is megjeleníthetnek. Ez 2 dolgot jelent: a Retina kijelzővel rendelkező felhasználóknak meg kell elégedniük a rosszul renderelt képekkel azokon az oldalakon, amelyek nem támogatják a Ratinát, másrészt az ilyen támogatással rendelkező webhelyeken minden nagyon jó minőségű, tiszta lesz, ahogy mi. tetszik és elvárja.
Miért fontos a Retina a reszponzív tervezéshez?
A kérdésre a válasz nagyon egyszerű: a legtöbb modern mobileszköz Retina kijelzővel rendelkezik, így ha reszponzív webhelyet hoz létre számukra, akkor a Ratina támogatásáról is gondoskodnia kell, hogy webhelye tökéletes legyen. Ha az oldal jól néz ki, akkor a felhasználó elégedettebb lesz.
Hogyan készítsünk Retina-kompatibilis képeket a reszponzív tervezéshez?
Ennek többféle módja és eszköze van. Csak a főbbeket vesszük figyelembe, mivel ezek oldják meg a feladatot a legjobban.
SVG
Biztos vagyok benne, hogy már ismeri az SVG formátumot. Kár, ha nem. De mindenesetre ismételjük meg. Az SVG a vektorgrafikák egyik képformátuma, amely vektorok használatával bármilyen méretűre nagyítható minőségromlás nélkül. Mivel a vektorok egy meghatározott formát alkotnak, nem pedig pixelkészletet, minden lehetséges módon manipulálhatók, és továbbra is érintetlenek és élesek lesznek. Sajnos az olyan raszteres formátumok, mint a JPG, PNG vagy GIF, nem dicsekedhetnek ezzel.
Egyedülálló, hibátlan átméretezési képességének köszönhetően az SVG remek formátum a reszponzív tervezéshez. Nem számít, milyen méretű a kijelző, a képek hibátlanul fognak kinézni telefonon vagy táblagépen, valamint a monitoron. Ez a Retina kijelzők esetében is működik, az SVG képek ugyanúgy fognak kinézni a pixelsűrűség átméretezése után. Ezért lehetőség szerint SVG-t kell használni.
Fényképek és bittérképek
Természetesen nem minden kép lehet SVG formátumú, főleg ha fényképről vagy kész bittérképről van szó. Erre az esetre is van megoldás, ez abban áll, hogy a képet 50%-os oldalmérettel jelenítjük meg. Mire gondolok? Tegyük fel, hogy el kell helyeznie egy 150x150-es fotót, és ehhez egy 300x300-as képet használ, de 150x150-esként jeleníti meg. Ebben az esetben a Retina kijelzőn látható kép éles és jó minőségű lesz.
Számos módja van a dupla képek használatának webhelyén: HTML, CSS vagy JS segítségével. Nem megyünk bele túlságosan a részletekbe, csak vegyük figyelembe az alapvető módszereket.
Első út. Van egy 300x300-as kép, amelyet beilleszt HTML-be, és 150 képpont szélességet és magasságot ad meg.
A második út. CSS segítségével módosíthatja a kép magasságát és szélességét, vagy megadhatja az 50%-ot, ha biztos abban, hogy a képet felezni szeretné.
De ennek a módszernek vannak árnyoldalai is. Először is, nem lehet légből kapott 2x nagyított képet. Nyilvánvaló, hogy csak egy kép nagyítása, majd a felhasználása nem megy! Ráadásul, ha az oldaladon sok kép található, vagy egyes képek egyszerűen nagyon nagyok, akkor ezzel a módszerrel az oldal betöltési ideje jelentősen megnövelhető. Főleg, ha figyelembe vesszük, hogy a legtöbb mobileszköz nagyon közepes internetkapcsolattal rendelkezik kis sávszélesség mellett.
De vannak módszerek ennek elkerülésére is.
Médialekérdezések
A CSS médialekérdezések írása során nem csak az eszköz képernyőjének magasságát és szélességét használhatja. A következő kód segítségével magabiztosan megállapíthatja, hogy az eszköz rendelkezik-e Retina kijelzővel. Ez a módszer akkor a legmegfelelőbb, ha háttérképeket használ divekhez, a médialekérdezés egyszerűen lecserélheti egy nagyobb képre. Ebben az esetben a nagyméretű képek csak a Retina kijelzővel rendelkező eszközökön töltődnek be.
@media csak képernyő és (-webkit-min-device-pixel-ratio: 2), csak képernyő és (min--moz-device-pixel-ratio: 2), csak képernyő és (-o-min-device-pixel) -arány: 2/1), csak képernyő és (min-eszköz-pixel arány: 2), csak képernyő és (min-felbontás: 192dpi), csak képernyő és (min-felbontás: 2dppx) ( /* CSS for Retina eszközök */ )
retina.js
Ha valamilyen okból nem elégedett a médialekérdezési megoldással, fontolja meg a JS opciót. Itt egy JavaScript beépülő modult fogunk megvizsgálni a probléma megoldására. "A Retina.js egy nyílt forráskódú szkript, amely megkönnyíti a nagy felbontású képek megjelenítését Retina kijelzőkön." Ez a beépülő modul a következőképpen működik: ha 2 képed van, az egyik normál méretű, a másik kétszer nagyítva, a retina.js észleli a Retina kijelző használatát, és a megfelelő képet használja. Nagyon egyszerűen működik, ezért mindenképpen próbáld ki. A plugin működéséhez mindössze annyit kell tennie, hogy helyesen nevezze el a képeket.
Ikonok
A @font-face-nek és a betűk helyett ikonokat használó betűtípusoknak köszönhetően könnyedén használhatja őket képek helyett. Nagyon szeretem ezt a módszert a következő okok miatt: Először is, a betűtípusok jól skálázódnak, csakúgy, mint az SVG, így nem csak különböző képernyőméretekre, hanem különböző felbontásokra is alkalmasak, mint a Retina esetében.
Megmutatom, hogyan optimalizálhatja gyorsan webhelye képeit a kiváló minőségű megjelenítés érdekében az új MacBook, iMac, iPhone, iPad stb. készülékeken használt Retina kijelzőkön. Szokás szerint előtte egy kis elmélet és gyakorlati tanácsaim.
Kezdjük egy meghatározással:
A Rétina (latinul retina - retina) az Apple készülékekben használt LCD-kijelzők általános marketingneve, amelyekre olyan magas pixelsűrűség jellemző, hogy az emberi szem nem látja, hogy ezekből áll a kép.
Talán ezzel vége is az elméleti résznek. Akit érdekel a Retina kijelzők eszköze, az könnyen találhat mélyebb információkat a speciális forrásokról.
Tehát valószínűleg észrevette, hogy a legtöbb webhely grafikája a retinán elmosódik. Helyesebb azt mondani, hogy más interfész elemekkel összehasonlítva nem tűnik túl világosnak. Ami még szabad szemmel is észrevehető. Nem nehéz megérteni - lebegő raszteres grafika. A vektorral minden rendben, bármilyen felbontáson és bármilyen pixelsűrűség mellett tökéletesen skálázódik. Számos módja van ennek a problémának a kezelésére, teljes könyvtárakat fejlesztettek ki, amelyek segítségével teljes mértékben hozzáigazíthatja webhelyét a Retinához. De ma másról fogunk beszélni.
Véleményem szerint a raszteres adaptáció nem túl ésszerű megközelítés.Úgy gondolom, hogy itt az ideje megszabadulni tőle a felületen, és teljesen lefordítani elemeit vektorgrafikává. Például be SVG. Ezen kívül az új CSS3 stílusok segítségével megszabadulhatunk a bitmap elszíneződéstől a színátmenetekben, a gombokon és egyéb felületelemeken megjelenő árnyékoktól. Az egykor a századfordulón népszerű raszteres ikonok szintén rég elhaltak, és csak az elmaradott amatőrök használják őket. Ugyanazok a vektoros SVG és font ikonkönyvtárak váltották fel őket, amelyeket a webfejlesztők annyira szerettek. Meg fogsz lepődni, de szinte minden oldal felülete különösebb gond nélkül megszabadulhat a rasztertől.Így örökre megóvja őt a nagy felbontású kijelzőkön való megjelenítési problémáktól.
Ha nem sikerült teljesen megszabadulnia a rasztertől, ne aggódjon! Pár bitmap kép az oldal felületén nem probléma és egyáltalán nem probléma. Elmondom, hogyan lehet egyszerűen és intelligensen adaptálni a bittérképet, hogy helyesen jelenjen meg egy Retina kijelzőn néhány soros CSS használatával.
Anélkül, hogy részleteznénk a helyzetet, vegyünk egy egyszerű példát. Webhelyének grafikusan összetett logója van, amelyet lehetetlen vagy nehéz vektoros formátumba konvertálni. Hagyjuk a logikai kérdéseket: hogyan történhetett, hogy nincs vektorlogó, és milyen logó az, amit nem lehet vektorban megjeleníteni. Feladatunk, hogy a Retinán a logó megjelenítését áttekinthetővé tegyük, szappantól megszabadulva.
Szüksége lesz egy logóképre, amely kétszer akkora, mint az eredeti. Például van egy 300x100 px méretű logo.png. Ezért hasonló képet kell készíteni, de kétszer akkora, azaz 600x200 px méretű. Természetesen nem úgy, hogy egyszerűen méretezzük a régi kis logót a Photoshopban. Új, jó minőségű tiszta képet készítünk, lehetőleg vektorból, nevezzük pl. [e-mail védett]és mentse a fő logó mellé.
Ezután megnyitjuk a szerkesztőben a webhely stílusfájlját, és megkeressük azt a helyet, ahol logója megjelenítési stílusa be van állítva. Általában ez valami ilyesmi:
Csak hozzá kell adnunk egy médialekérdezést, hogy az 1,5-nél nagyobb fizikai és CSS pixelarányú kijelzőknél betöltődik az új képünk logo2x.png
Ez nagyon egyszerűen történik:
@media all and (-webkit-min-device-pixel-ratio: 1,5) ( #logo ( background-image: url("images/ [e-mail védett]"); háttérméret: 300 képpont 100 képpont; ) )
Ne felejtse el beállítani a háttér méretét az eredeti képével megegyezőre. A mi esetünkben 300x100 px.
Nyilvánvaló, hogy ezt a módszert néhány konkrét kép esetén célszerű használni. Ha Retina támogatást szeretne kapni, beleértve a tartalmat is, használjon más módszereket. Máskor beszélünk róluk.
Iratkozzon fel táviratomra, és elsőként kapja meg az új anyagokat, beleértve a amelyek nincsenek a weboldalon.
Ma már egyre több a megnövelt pixelsűrűségű képernyővel felszerelt készülék, így a modern oldalak (főleg promóciós oldalak, landing oldalak stb.) építésénél ezt érdemes figyelembe venni.
Nem mélyedek el az elméletben, csak néhány technika gyakorlati alkalmazásáról beszélek.
A retina képernyőjén megjelenő elmosódott képek fő oka az információhiány. mivel egy képpixel négy fizikai képpontra van leképezve. Más szóval, minden megoldás a képek 2-szer nagyobb vagy 2-szer kisebbre állítása (a kép nincs méretezve a retina képernyőkön).
1. megoldás html használatával
2-szer nagyobb képet használjon a szélesség és magasság paraméterek kemény kódolásával
example2x.png képnek 200x400 méretűnek kell lennie
1. megoldás JavaScripttel
A módszer hasonló az elsőhöz, de kissé automatizált
Ha a háttér méreteit kell megadnia, nem a képhez, akkor ezt a következőképpen teheti meg:
Kép (háttérkép: url(example2x.png); háttérméret: 100 képpont 200 képpont; /* alternatív háttérméret: tartalmaz; */ szélesség: 100 képpont; magasság: 200 képpont; )
A háttérméret beállítását azonban az IE 7 és 8 nem támogatja.
És mint látható, a fenti megoldások mindegyikéhez kétszer akkora képet kell betölteni, függetlenül attól, hogy egyszerű képernyőről vagy retináról van szó, ami nem jó.
Tehát 2 képet kell használnia, egyet az egyszerű képernyőkhöz és egyet a retina képernyőhöz.
2. megoldás CSS-sel
Ez elsősorban a háttérképekre vonatkozik.
Ikon ( background-image: url(example.png); szélesség: 100px; magasság: 200px; ) @media csak képernyő és (-Webkit-min-device-pixel-ratio: 1,5), csak képernyő és (-moz-min-device-pixel-ratio: 1,5), csak képernyő és (-o-min-eszköz-pixel arány: 3/2), csak képernyő és (min. eszköz-pixel arány: 1,5), csak képernyő és (min--moz-eszköz-pixel arány: 1,5), csak képernyő és (min. felbontás: 1,5 dppx)( .icon ( background-image: url(example2x.png); ) )
ahol az example.png kép 100x200 és az example2x.png kép 200x400
2. megoldás JavaSctipt-tel
A képeket szükség esetén nagyméretűre cseréljük:
$(document).ready(function()( if (window.devicePixelRatio > 1) ( var lowresImages = $("img"); images.each(function(i) ( var lowres = $(this).attr(" src"); var highres = lowres.replace(".", "@2x."); $(this).attr("src", highres); )); ) ));
Igen, és zárásként szeretném hozzátenni, hogy a retina kijelző nem egészen a helyes név, mert. egy Apple marketing kifejezés, és formálisan csak a technológiájára utal. Jelenleg azonban minden megnövelt pixelsűrűségű képernyőn használatos.
Natalya Komarova , 2009. 05. 28. (2018. 03. 25.) Amikor egy fórumot vagy blogot olvasol, a bejegyzések szerzőire becenévvel és ... a felhasználó képével, az úgynevezett avatárral... emlékszel.
