Responsive Web Design Viewport
Indholdsfortegnelse
Hvad er The Viewport?
Viewporten er brugerens synlige område på en webside.
Viewporten varierer med enheden og vil være mindre på en mobiltelefon end på en computerskærm.
Før tablets og mobiltelefoner var websider kun designet til computerskærme, og det var almindeligt for websider skal have et statisk design og en fast størrelse.
Så, da vi begyndte at surfe på internettet ved hjælp af tablets og mobiltelefoner, fik vi det størrelse websider var for store til at passe til visningsporten. For at løse dette har browsere på disse enheder nedskaleret hele websiden, så de passer til skærmen.
Dette var ikke perfekt!! Men en hurtig løsning.
Indstilling af Viewport
HTML5 introducerede en metode til at lade webdesignere tage kontrol over viewporten gennem tag.
Du bør inkludere følgende > viewport-element på alle dine websider:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Dette giver browseren instruktioner om hvordan at kontrollere sidens dimensioner og skalering.
width=device-width-delen indstiller sidens bredde, så den følger enhedens skærmbredde (hvilket vil variere afhængigt af enheden).
initial-scale=1.0 delen indstiller det indledende zoomniveau, når siden først indlæses af browseren.
Her er et eksempel på en webside uden viewport-metatagget og den samme webside med viewport-metatagget:
Tip: Hvis du gennemser denne side med en telefon eller en tablet, kan du klikke på de to links ovenfor for at se forskellen.
Større indhold til visningsporten
Brugere bruges til at rulle hjemmesider lodret på både desktop og mobil enheder - men ikke vandret!
Så hvis brugeren er tvunget til at rulle vandret eller zoome ud for at se hele websiden resulterer det i en dårlig brugeroplevelse.
Nogle yderligere regler at følge:
1. Brug IKKE store faste breddeelementer - Hvis f.eks et billede vises i en bredere bredde end den viewport, det kan forårsage viewport for at rulle vandret. Husk at justere dette indhold, så det passer ind bredden af visningsporten.
2. Lad IKKE indholdet stole på en bestemt visningsportsbredde render godt - Da skærmdimensioner og -bredde i CSS-pixels varierer bredt mellem enheder, bør indhold ikke stole på en bestemt viewport-bredde at gengive godt.
3. Brug CSS-medieforespørgsler til at anvende forskellig stil til små og store skærme - Indstilling af store absolutte CSS-bredder for sideelementer vil få elementet til at være for bredt til viewporten på en mindre enhed. Overvej i stedet at bruge relative breddeværdier, såsom bredde: 100 %. Vær også forsigtig med at bruge store absolutte positioneringsværdier. Det kan få elementet til at falde uden for viewporten på små enheder.