Ovaj će blog objasniti kako koristiti meta oznaku okvira prikaza za responzivni web dizajn u HTML-u:
Što je metaoznaka Viewport?
' prozor za prikaz ” najvažnija je oznaka za stvaranje responzivnog dizajna kontroliranjem načina na koji se sadržaj prikazuje na različitim veličinama zaslona. Ova oznaka se nalazi unutar '
Različiti atributi meta oznake Viewport
Meta oznaka okvira za prikaz ima sljedeće atribute koji se mogu postaviti kao vrijednost za ' sadržaj ” atribut:
atribut “width”.
' širina ” atribut određuje vidljivo područje web-stranice za sadržaj okomito. Njegova meta oznaka izgleda ovako:
< meta Ime = 'viewport' sadržaj = 'width=device-width' >
atribut 'visina'.
' visina ” atribut postavlja okomitu duljinu web-stranice kako bi se osiguralo da visina prozora odgovara visini zaslona. Njegova meta oznaka izgleda ovako:
< meta Ime = 'viewport' sadržaj = 'visina=400' >
Atribut 'početne skale'.
' Početna skala ” atribut osigurava da se web stranica prikazuje na odgovarajućoj razini zumiranja kada se prvi put učita. Na primjer, posjetite donji kod:
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1.0' >atribut “maximum-scale”.
' maksimalna skala ” atribut određuje maksimalnu razinu zumiranja za web stranicu kako bi se spriječili problemi s izgledom:
< meta Ime = 'viewport' sadržaj = 'width=device-width, maximum-scale=1.0' >
atribut “minimalne skale”.
' minimalna skala ” koristi se za ograničavanje korisnika od prevelikog smanjivanja određivanjem minimalne razine ljestvice smanjenja:
< meta Ime = 'viewport' sadržaj = 'width=device-width, minimum-scale=0.5' >atribut “korisnički skalabilan”.
' korisnički skalabilan ” atribut dopušta ili ne dopušta korisniku da smanji ili poveća zaslon web stranice postavljanjem vrijednosti na “ Ne ' ili ' Da ”. Meta oznaka koja korisniku omogućuje povećanje ili smanjenje je:
< meta Ime = 'viewport' sadržaj = 'width=device-width, user-scalable=yes' >Kako koristiti meta oznaku Viewport za responzivni web dizajn u HTML-u?
Za bolje razumijevanje upotrebe metaoznake okvira prikaza za responzivni web dizajn. Prođimo kroz primjer:
Pretpostavimo unutar ' Nakon kompilacije gornjeg isječka koda, web stranica izgleda ovako: Izlaz pokazuje da sadržaj ne reagira jer se ne prikazuje savršeno na malim uređajima. Sada da biste ga prilagodili dodajte ' prozor za prikaz ” meta oznaka: Nakon ažuriranja koda, web stranica izgleda ovako na različitim veličinama zaslona: Konačni rezultat ilustrira da je web stranica sada responzivna nakon dodavanja meta oznake unutar ' Meta oznaka okvira za prikaz omogućuje razvojnom programeru da pregledniku pruži niz uputa koje postavljaju kako će se web stranica prikazivati na uređajima različite veličine zaslona. Meta oznaka se nalazi unutar ' ” oznaka: < div >
< str >
< b >Pokreće Linuxhint, da biste bolje razumjeli meta oznaku okvira prikaza otvorite web stranicu na drugom zaslonu veličina uređaji.< / b >
< / str >
< img src = '../bg.jpg' sve = 'haker' širina = '460' visina = '3. 4. 5' >
< str stil = 'padding:5px' >
< ja >Pridružite se timu Linuxhinta < / ja >
Pokreće Linuxhint, da biste bolje razumjeli meta oznaku okvira prikaza otvorite web stranicu na drugom zaslonu veličina uređaji.Pokreće Linuxhint, da biste bolje razumjeli meta oznaku okvira prikaza otvorite web stranicu na drugom zaslonu veličina uređaji.Pokreće Linuxhint, da biste bolje razumjeli meta oznaku okvira prikaza otvorite web stranicu na drugom zaslonu veličina uređaji.Pokreće Linuxhint, da biste bolje razumjeli meta oznaku okvira prikaza otvorite web stranicu na drugom zaslonu veličina uređaja.
< / str >
< / div >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1.0' / >
< / glavu >
Zaključak