Share
Den nya iPad släpptes förra månaden, och bland annat spelar den en otrolig Retina Display med en upplösning på 2048 med 1536 pixlar. Något så snart som det blev tillkännagav, vände sig fokus mot inbyggda apputvecklare och deras arbete för att skala apps upp till den högre upplösningen.
Det var förmodligen fel fokus. Relativt lite var tänkt på vad gäller webben, och hur det skulle se ut på den nya retina-displayen i slutet av meddelandet. Det har lämnat oss med ett internet av otroligt skarp text, men skämtsamt hemskt, bilder av låg kvalitet. Det är dags att optimera, så i denna handledning kommer vi att strategisera hur du kan designa med Retina Display i åtanke.
Detta är förmodligen ganska uppenbart, men det kan fortfarande förbises av vissa. Med betydande framsteg i CSS kan användningen av bilder i en webbplats struktur vara ganska minimal, eller till och med obefintlig alls. Detta ger dessa platser en stor fördel när det gäller Retina Display-kompatibilitet eftersom text och CSS-genererad grafik kommer att skala upp utan att minska kvaliteten. Av samma anledning ser texten ut mätbart bättre på en näthinnans skärm.
En webbplats jag arbetade på behövde inte en enda uppdatering till dess tema för att se bra ut på näthinnan. bristen på bilder menade att det inte fanns något att uppdatera. Naturligtvis är inte varje webbplats helt sans bilder, men minimerar användningen minskar den ansträngning som krävs för att optimera för näthinnans skärm.
Generellt finns det ett steg till denna taktik: minimera bildanvändning där det inte behövs.
Naturligtvis är Apples webbplats optimerad för att se oerhört skarp och skarp ut på Retina Display. I dagarna före iPad: s tillkännagivande började Apple uppdatera sin egen webbplats för att ge responsiva bilder. objekt som ändrats beroende på om du bläddrar på en ny iPad eller inte.
Apples metod är i princip enkel. Webbplatsen laddas upp som vanligt, men då använder de JavaScript för att ersätta relevanta bilder om du surfar på en ny iPad. Om du besöker en ny iPad får du de optimerade bilderna, medan en annan webbläsare kommer att dra upp standardinställningarna.
Ett sådant exempel på detta är Apples hjältext på iPad: s produktsida, med följande kod i själva filen.
För enkelhetens skull kommer jag inte att dela med deras faktiska skript, men i huvudsak kontrollerar den först om webbläsaren är på en enhet med en näthinnans skärm, och kontrollerar att det finns en 2x-bild (vi kommer på det på en minut) och om båda de tidigare villkoren är sanna visar den 2x bilden.
2x-suffixkonventionen betyder motparten "Retina" för filen image.png skulle vara image_2x.png. Detta kommer från iOS, som automatiskt visar en @ 2x bild i en inbyggd app när den finns. Tyvärr får vi webbdesigners inte lyxen för automatisk sökning och visning, så vi måste komma fram till metoder för att emulera det med våra egna skript och frågor.
Detta kommer dock till ett pris. Med denna metod laddas slutanvändaren både non-retina och retina-bilden, vilket innebär att sidan hamnar med en ökad filstorlek. Inte bara det, Apples skript betyder att fler förfrågningar skickas till och från webbläsaren, vilket resulterar i ytterligare sidladdningstid. Självklart, om du fortsätter att minimera bildanvändningen, kommer det här problemet också att minskas.
Medan Apple använder JavaScript, en något effektiv metod finns det ett alternativ; Använda CSS-mediafrågor för att tjäna upp styling-villkoret till enhetens pixeldensitet.
Innan vi kommer på det är det viktigt att notera att i slutändan är iPad-skärmen fortfarande 1024x768 px i "CSS pixlar". Jag låter Dave Hyatt förklara.
De flesta webbplatsförfattare har traditionellt tänkt på en CSS-pixel som en pixel för en enhet. Men när vi går in i den här nya höga DPI-världen där hela användargränssnittet kan förstoras, kan en CSS-pixel sluta bli flera pixlar på skärmen. Till exempel om jag ställer in en zoomförstoring av 2x, skulle 1 CSS-pixel faktiskt representeras av en 2 × 2 kvadrat av enhetspixlar.
Därför kommer metoden vi använder inte att rikta in mot iPad baserat på dess upplösning eftersom det helt enkelt inte skulle fungera. För alla ändamål är iPad-upplösningen fortfarande 1024x768 px enligt webbläsaren, och inriktning på denna upplösning skulle också riktas mot alla tidigare iPad-generationer. På samma sätt skulle inriktning på den nya 2048x1536 px-upplösningen med mediefrågor inte ha någon effekt på den nya iPad.
I stället kan vi rikta oss mot att använda min-anordning-pixel-förhållandet fråga. Den frågan berättar att webbläsaren laddar upp en specifik stil baserad på förhållandet mellan enhetspixlar och de tidigare nämnda "CSS-pixlarna". I Retina Display-utrustade iPad-fallet är detta två (1024: 2048 och 768: 1536 förenklade ner till 1: 2).
Därför kan vi ladda in ett "näthinnes" stilark baserat på enhetens pixelförhållande.
Självklart använder vi WebKit-prefixet eftersom iPad-webbläsaren är Safari, en WebKit-webbläsare, men också för att mediefrågan endast är tillgänglig via WebKit för nu. Eftersom typsnittskaskadet (som namnet "CSS" kommer att berätta för dig), genom att helt enkelt beställa ovanstående tagg korrekt, kommer reglerna i det stilarket att överskriva de för vanliga enheter som angivits tidigare.
Om du inte råkar vilja sätta allt i ett helt separat stilark, kan du använda inline-mediafrågor för att ange delar av ditt stilark för enheter som bara har Retina Display-utrustade, så här:
Accentsconagua
@media (-webkit-min-enhet-pixel-förhållande: 2) #element background-image ('image-2x.png'); Notera: Medan du använder "2x" namngivningssystemet är det ett användbart sätt att organisera dina bilder, känner dig inte skyldig att göra det. Du kan namnge dina bilder oavsett vad du vill och, till skillnad från med inhemska appar, behöver de inte vara ensamstående på liknande sätt.
Naturligtvis är det inte på något sätt som är specifikt för iPad att använda denna mediafråga. Faktum är att samma logik kommer att utlösas när du surfar på din webbplats på vilken enhet som helst med samma pixeldensitet, som använder samma CSS-till-pixelförhållande, inklusive iPhone 4 och iPhone 4S. Om du bara vill rikta in iPad, kan du helt enkelt kombinera frågeställningen för pixelförhållande med en bredd, för att bara ange nätverksskärmar som är utrustade med iPad i rapporteringsupplösningen.
Det är inte så att din webbplats ser bra ut utan att optimera, men ser bättre ut med. Du behöver bara besöka en bildrik men inte optimerad webbplats för att förstå hur fruktansvärda bilder som inte är Retina-bilder ser ut på den nya iPad. Och i slutändan måste du faktiskt bevittna resultaten. Om du inte har tillgång till en ny iPad rekommenderar jag starkt att du ska ta en titt på en Apple Store.
Medan Apple har sålt miljontals enheter, i det stora systemet med webbläsare, är det fortfarande ett litet problem. Men med potentiell Retina Display-utrustad MacBook i horisonten så tidigt som i sommar kan det faktum att arbetet nu verkligen kan betala senare.
