Viewporten är användarens synliga område på en webbsida.
Viewporten varierar med enheten och kommer att vara mindre på en mobiltelefon än på en datorskärm.
Innan surfplattor och mobiltelefoner designades webbsidor endast för datorskärmar, och det var vanligt för webbsidor att ha en statisk design och en fast storlek.
Sedan, när vi började surfa på internet med surfplattor och mobiltelefoner, fixade det Webbsidornas storlek var för stora för att passa visningsporten. För att åtgärda detta skalade webbläsare på dessa enheter ner hela webbsidan för att passa skärmen.
Detta var inte perfekt!! Men en snabb fix.
HTML5 introducerade en metod för att låta webbdesigners ta kontroll över viewporten, genom -taggen.
Du bör inkludera följande viewport-element på alla dina webbsidor:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Detta ger webbläsaren instruktioner om hur för att kontrollera sidans dimensioner och skalning.
Delen width=device-width
ställer in sidans bredd så att den följer enhetens skärmbredd (vilket kommer att variera beroende på enhet).
Delen initial-scale=1.0
ställer in den initiala zoomnivån när sidan först laddas av webbläsaren.
Här är ett exempel på en webbsida utan viewport-metataggen, och samma webbsida med viewport-metataggen:
Tips: Om du surfar på den här sidan med en telefon eller surfplatta kan du klicka på de två länkarna ovan för att se skillnaden.
Användare används för att scrolla webbplatser vertikalt på både stationära och mobila enheter enheter - men inte horisontellt!
Så om användaren tvingas rulla horisontellt eller zooma ut för att se hela webbsidan resulterar i en dålig användarupplevelse.
Några ytterligare regler att följa:
1. Använd INTE stora element med fast bredd - Till exempel, om en bild visas med en bredd som är bredare än visningsporten den kan orsaka viewport för att rulla horisontellt. Kom ihåg att justera innehållet så att det passar visningsportens bredd.
2. Låt INTE innehållet förlita sig på en viss visningsportbredd rendera bra - Eftersom skärmdimensioner och bredd i CSS-pixlar varierar mellan enheter bör innehåll inte förlita sig på en viss visningsportbredd att återge bra.
3. Använd CSS-mediefrågor för att tillämpa olika stilar för små och stora skärmar - Ställa in stora absoluta CSS-bredder för sidelement kommer att göra att elementet blir för brett för visningsporten på en mindre enhet. Överväg istället att använda relativa breddvärden, till exempel bredd: 100 %. Också vara var försiktig med att använda stora absoluta positioneringsvärden. Det kan orsaka att elementet falla utanför siktporten på små enheter.