Responsiv webbdesign -Viewport

Vad är viewport?

Viewport (viewport) är den synliga regionen på webbsidan för användaren.

Viewport varierar beroende på enhet, och det är mindre på en mobiltelefon än på en datorskärm.

Innan surfplattor och telefoner var webbsidor endast designade för datorskärmar, och det var vanligt att webbsidor hade statisk design och fast storlek.

När vi började använda surfplattor och telefoner för att surfa på internet var webbsidor för stora för att anpassa sig till viewport. För att lösa detta problem minskar webbläsarna på dessa enheter hela webbsidan i proportion för att passa skärmstorleken.

Det är inte perfekt! Det är en snabb lösning.

ställa in viewport

HTML5 introducerade ett sätt som låter webbdesigners <meta> taggar för att styra viewport.

Du bör inkludera följande <meta> Viewport-element:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Det ger webbläsaren instruktioner om hur den ska styra sidans storlek och skalning.

width=device-width Delvis ställer in sidans bredd till att följa skärmen på enheten (beroende på enhet).

När webbläsaren laddar sidan för första gångeninitial-scale=1.0 Delvis sätter initial skalnivå.

Nedan är exempel på webbsidor utan viewport meta-taggar och med viewport meta-taggar respektive:

Tips:Om du surfar på denna sida med en telefon eller en surfplatta kan du klicka på de två länkarna nedan för att se skillnaderna.



Ingen viewport-metatag


Med viewport-metatag

Justera innehållet till viewport-storleken

Användare är van vid att rulla vertikalt på datorer och mobila enheter, inte horisontellt!

Därför leder det till en dålig användarupplevelse om användaren tvingas rulla horisontellt eller zooma in för att se hela webbsidan.

Ytterligare regelverk att följa:

1. Använd inte större fasta breddselement - Till exempel, om bildens bredd är större än viewportens bredd, kan det leda till horisontell rullning i viewporten. Se till att justera detta innehåll för att passa viewportens bredd.

2. Låt inte innehållet vara beroende av en specifik viewport-bredd för att visa bra resultat - Eftersom skärmens storlek och bredd i CSS-pixel märkligt varierar mellan enheter, bör innehållet inte vara beroende av en specifik viewport-bredd för att visa bra resultat.

3. Använd CSS mediefrågor för att tillämpa olika stilar för små och stora skärmar - Att sätta en större CSS absolut bredd på element för att skapa element som är för breda för små enheter. Det är bättre att överväga att använda relativa breddvärden, till exempel width: 100%. Vårdslös användning av stora absoluta positioner kan leda till att elementet rullar ut ur viewporten på små enheter.