Responsivt websted design - Visningsport

Hvad er viewport?

Viewport (viewport) er den synlige del af websiden for brugeren.

Viewporten varierer afhængigt af enheden, og den vil være mindre på en mobiltelefon sammenlignet med en computerskærm.

Før tablets og mobiltelefoner var websider kun designet til computer-skærme, og det var almindeligt med statiske designs og faste størrelser.

Da vi begyndte at bruge tablets og mobiltelefoner til at få adgang til internettet, var websiderne for store til at tilpasse sig viewporten. For at løse dette problem vil browsere på disse enheder forstørre hele websiden i proportioner for at passe til skærmstørrelsen.

Dette er ikke perfekt! Det er en hurtig rettesnor.

indstille viewport

HTML5 har introduceret en metode, der gør det muligt for webdesignere at <meta> etiketter for at kontrollere viewport.

Du bør inkludere følgende <meta> Viewport-elementet:

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

Det giver browseren instruktioner om, hvordan den skal kontrollere sideskala og -størrelse.

width=device-width Delvis sætter websidens bredde til at følge skærmens bredde på enheden (afhængigt af enheden).

Når browseren første gang indlæser sideninitial-scale=1.0 Delvis indstille initial zoom-niveau.

Her er eksempler på websider uden viewport meta-mærke og websider med viewport meta-mærke:

Vedligeholdelse:Hvis du bruger en mobiltelefon eller en tablet til at se denne side, kan du klikke på de to nedenstående links for at se forskellen.



Uden viewport meta-mærke


Med viewport meta-mærke

Juster indholdet til viewport-størrelsen

Brugere er vanedannede til at rulle lodret på både stationære computere og mobile enheder, i stedet for at rulle vandret!

Derfor vil det medføre en dårlig brugeroplevelse, hvis brugeren tvunget skal rulle vandret eller zoome ind for at se hele websiden.

Der er nogle yderligere regler, der skal følges:

1. Brug ikke elementer med stor fast bredde - For eksempel kan en billedbredde, der er større end visningsportens bredde, føre til, at visningen skal rulles vandret. Sørg for at justere dette indhold til visningsportens bredde.

2. Lad ikke indholdet afhænge af en bestemt visningsport bredde for at præsentere en god effekt - På grund af de store variationer i skærmstørrelse og bredde i CSS pixels mellem enheder, bør indhold ikke afhænge af en bestemt visningsport bredde for at præsentere en god effekt.

3. Brug CSS medieforespørgsler til at anvende forskellige stilarter til små og store skærme - At sætte en stor CSS absolut bredde på elementer forårsager, at disse elementer er for brede i små enheder. Det skal overvejes at bruge relative breddeværdier, såsom width: 100%. Desuden skal man være forsigtig med at bruge store absolutte positionsværdier, hvilket kan føre til, at elementer glider uden for visningen på små enheder.