Share
Jag kommer ihåg min jungfru resa till lyhörd webbdesign. Jag hade använt ett klassiskt rutnät, brottas med en flexibel layout och hanterade mediasökningar för första gången. Att sträcka och krympa webbläsarfönstret resulterade i en tillfredsställande syn på min design som svarade på omgivningen. Sedan testade jag det på en mobil. Det fungerade inte - jag tittade på en nedbruten version av helskärmsdesignen. Lösningen, som det visade sig, var enkel ...
Notera: Denna handledning publicerades första gången i februari 2012, men den används ofta som referens i andra handledning (och saker har ändrats) så jag kände att det var motiverat en uppdatering.
Denna handledning kommer att lära dig om att använda metataggen för visningsporten själv, men om du behöver hjälp med att skapa en mottaglig webbplats finns det många designers som kan hjälpa dig på Envato Studio. Här är några av de bästa alternativen:
Den här leverantören från Storbritannien kommer att skapa en anpassad webbdesign och utveckling baserad på din branding, färger, funktionalitetskrav och bästa användbarhetsmetoder. Din webbplats kommer att vara unik för ditt företag och upprättas för maximal konvertering.
Du kommer få:
Om du själv kan hantera utvecklingen och bara vill ha en design, kan du välja det här alternativet, vilket ger dig en webbplats utformad på ett professionellt sätt. Här är vad du får:
Den här leverantören är en heltidsanställd frilans webbdesigner med över 12 års yrkeserfarenhet inom webbdesign, grafisk design och användargränssnitt för användargränssnitt.
Du får en elegant webbsidans webbplats utformad med responsivt beteende i åtanke.
Om ingen av dessa alternativ är för dig, eller om du hellre lär dig att göra det själv, läs vidare för instruktionerna.
Om du inte läser något annat inom detta inlägg, ta en bit råd: Om du designar flexibelt, använd metataggen för visningsporten i din . I sin grundläggande form kommer den att ställa dig upp för att skapa en sinnesrörelse i flera enheter:
Låt oss använda en exempellayout som jag har piskat ihop. Ta en titt; Du ser att den krymper och växer när du ändrar webbläsarens storlek. Det finns också en enda mediefråga som gör texten större och ger rubriken en ljus # ff333e färg på bredare skärmar. Härlig.
Så här ser det ut i OSX Chrome:
Och här är hur det visas när webbläsarfönstret är squished:
Låt oss nu se hur det ser ut på en smartphone (i detta fall iOS Safari på en iPhone 4):
Det första du märker är den röda rubriken. en dead giveaway som vi inte tittar på den smala layouten som vi skulle förvänta oss. Vi tittar faktiskt på en zoomad version.
iOS Safari förutsätter att en webbsida är 980px bred och zoomar ut för att passa mycket i den tillgängliga (iPhone 4) 320px. Innehållet är då mycket mindre läsbart, om du inte zoomar in.
Som de säger är antagandet moder till alla ... något men det är precis vad mobila webbläsare måste göra om du inte specifikt instruerar dem. När du besöker en webbplats via en mobil webbläsare antar du att du tittar på en stor skrivbordserfarenhet och att du vill se allt, inte bara det övre vänstra hörnet. Det kommer därför att ställa in visningsbredden vid (i fallet med iOS Safari) 980px, skoja allt i sin lilla skärm.
Ange visningsmetataggen, introducerad av Apple, sedan antagen och vidareutvecklad av andra.
Det ser ut så här:
Inom content = "" du kan ange en mängd kommaavgränsade värden, men vi kommer att fokusera på de grundläggande för närvarande.
Till exempel, om din mobildesign är avsiktligt inställd på 320px kan du ange visningsbredd:
För flexibla layouter är det mer praktiskt att basera din visningsbredd på den aktuella enheten, så att matcha din layoutbredd till enhetens bredd som du skulle ange:
För att vara extra säker på att din layout kommer att visas som du tänkte på det kan du också ställa in zoomnivån. Detta, till exempel:
... kommer att se till att din layout vid öppningen visas korrekt i skala 1: 1. Ingen zoomning kommer att tillämpas. Du kan till och med gå vidare och förhindra att du zoomar av användaren:
Notera: Innan du tillämpar parametern för maximal skala, överväga om du verkligen bör förhindra att användarna zoomar in. Kan de läsa allt så bra som möjligt?
Använda metapaketet för visningsport kan fel sätt hindra användare med visuella problem med att komma åt din webbplats
- Tillgänglighetsprojektet
Dessa värden tillsammans ger oss en bra standard att arbeta med:
Låt oss se hur det påverkar vårt exempel
Som du kan se är allt kvar i rätt skala. Texten wraps istället för att krympa, och vår visuella hjälpare (den röda rubriken) har försvunnit.
Hat tips till Jason för att peka ut detta i kommentarerna. Genom att ange att bredden på din layout är lika med enhetens bredd, kommer du att stöta på problem när en enhet används i landskapet. Ta en titt på hur en iPhone 4 hanterar vår demo, i landskapet:
Webbläsaren känner sig skyldig att zooma in, för att matcha bredden på sidan.
För att komma runt detta kan vi, som Jason påpekar, använda JavaScript för att villkorligt välja vilka metatagattribut som ska gå med, men den enklaste lösningen verkar vara att helt enkelt ignorera bredd sammanlagt. Genom att bara ställa in initial-skala bredden är avledad. Så här visas vår nya, förenklade demo i landskapet:
Viewport-metatagen var Apples lösning på problemet. Det antogs snabbt av andra plattformar, men det framlades aldrig av W3C. Microsoft lade fram detta när de valde för IE10 att ignorera visningsmetataget under vissa omständigheter. I stället valde de att använda CSS Device Adaptation, vilken är vad W3C lutar på.
Kortfattat definieras liknande visningsegenskaper inom CSS med hjälp av @viewport-regeln istället för i HTML.
@viewport zoom: 1.0; Bredd: Enhetsbredd;
Eller enligt vår nyare Ange inte enhetens bredd tillvägagångssätt, kunde vi ställa följande:
@viewport zoom: 1.0; bredd: förläng-till-zoom;
Med tanke på att det är ett pågående arbete kräver IE10 den prefixade versionen av förslaget, som ser något ut så här:
@ -ms-viewport width: extend-to-zoom; zoom: 1.0;
Det är en mycket mer elegant lösning än metatagen, men är långt ifrån att vara fullt stödd. Slå in den i din CSS nu, för att se till att din lyhörda design beter sig i IE10 "snap mode" och hålla ett öga på dess framsteg i framtiden. Här är utsiktskontrollen på väg.
Du kan läsa mer om detta i Tim Kadlecs post IE10 Snap Mode och Responsive Design.
Responsiv webbdesign är inte bara för att folk som gillar att titta på sina webbläsare växer och krymper, det handlar om catering för så många olika enheter, skärmar och upplösningar som möjligt! Kasta Viewport Meta Tag i din , plus @viewport-regeln i din CSS när du bygger flexibla layouter och du är bra att gå.
Du kan också hitta tusentals högkvalitativa responsiva teman och mallar på ThemeForest, och ett stort antal skript, plugins och tillägg i kategorin "responsiv" på CodeCanyon.
Accentsconagua