Liigu sisu juurde

Kerge vaade: lehed avanevad kiiresti ja ilma 3D-graafikata. Näitame kerget vaadet, sest 3D-graafika oleks selles seadmes aeglane. Sisu on sama.

Lülita 3D sisse

Valmistan graafikat ette. Esimesel külastusel võib see veidi aega võtta.

Henry Lõiv

Veebidisain ja arendus

Kiirvastus

100vh, 100svh või 100dvh: mida telefonis kasutada?

Arendus 1 min lugemist

Kasuta svh, kui vajad stabiilset kõrgust koos nähtava brauseriribaga; dvh, kui element peab järgima vaateava muutumist. Klassikaline vh võib telefonis tähendada kõrgust, mille puhul nähtav brauseririba katab osa sisust. 12

Mõtle käitumisele, mitte uuemale lühendile

100svh lähtub väikesest vaateavast. See aitab vältida olukorda, kus esimese ekraani nupp jääb brauseri juhtnuppude alla. Kui brauseririba peitub, võib nähtav ala olla elemendist suurem.

100dvh muutub koos dünaamilise vaateavaga. See sobib näiteks ekraani täitva paneeli jaoks, kuid võib kerimise ajal paigutust ümber arvutada. See pole igas olukorras automaatselt parem. 1

Sisuga sektsiooni lihtne näide

.hero {
  min-height: 100vh;
  min-height: 100svh;
}

min-height jätab pikemale sisule kasvuruumi. Fikseeritud height koos peidetud ülevooluga võib muuta teksti või nupu kättesaamatuks.

Kontrolli lehte brauseririba nähtaval ja peidetud olekus, rõhtasendis ning suurema tekstisuurusega. Vormide puhul testi eraldi ekraaniklaviatuuri: vaateava ühiku vahetamine üksi ei lahenda kõiki klaviatuuri ja turvaalade paigutusprobleeme.

Vali ühik selle järgi, millist liikumist kasutaja peaks nägema. Stabiilne avalehe plokk ja dünaamiliselt täituv dialoog ei pea kasutama sama lahendust.

Seotud lugemine

Veebilehe arendus ja uuendamine

Allikad

  1. web.dev: small, large and dynamic viewport units
  2. MDN: viewport-relative CSS lengths

Faktid kontrollitud:

Räägime sinu projektist

Kirjelda oma projekti

Räägi, mida soovid luua või paremaks teha. Valmis lähteülesannet pole vaja — täpsustame töömahu ja järgmised sammud koos.

01 Millega saan aidata?
02 Mitu lehte on vaja?
03 Milliseid lisasid veebileht vajab? Vali kõik sobivad
04 Millal peab töö valmis olema?
05 Projekti üksikasjad
06 Sinu kontaktandmed

Päring on vastu võetud

Aitäh!

Päring on vastu võetud. Vastan e-posti teel tavaliselt 2 tööpäeva jooksul.