V tem spletnem dnevniku bo razloženo, kako uporabiti metaoznako vidnega polja za odzivno spletno oblikovanje v HTML:
Kaj je metaoznaka Viewport?
' vidno polje ” je najpomembnejša oznaka za ustvarjanje odzivnega dizajna z nadzorom, kako se vsebina prikaže na različnih velikostih zaslona. Ta oznaka je nameščena znotraj '
Različni atributi metaoznake Viewport
Metaoznaka vidnega polja ima naslednje atribute, ki jih je mogoče postaviti kot vrednost za » vsebino ” atribut:
atribut 'širina'.
' premer ” atribut določa vidno območje spletne strani za vsebino navpično. Njegova meta oznaka je videti takole:
< meta ime = 'viewport' vsebino = 'width=device-width' >
atribut 'višina'.
' višina ” nastavi navpično dolžino spletne strani, da zagotovi, da se višina vidnega polja ujema z višino zaslona. Njegova meta oznaka je videti takole:
< meta ime = 'viewport' vsebino = 'višina=400' >
Atribut 'začetne lestvice'.
' Začetna lestvica ” zagotavlja, da je spletna stran ob prvem nalaganju prikazana z ustrezno stopnjo povečave. Na primer, obiščite spodnjo kodo:
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1.0' >atribut 'maximum-scale'.
' največja lestvica ” določa največjo stopnjo povečave za spletno stran, da prepreči težave s postavitvijo:
< meta ime = 'viewport' vsebino = 'width=device-width, maximum-scale=1.0' >
atribut 'minimalni obseg'.
' minimalna lestvica ” se uporablja za omejitev uporabnika pred preveliko pomanjšavo z določitvijo najmanjše stopnje pomanjšave:
< meta ime = 'viewport' vsebino = 'width=device-width, minimum-scale=0,5' >»uporabniško razširljiv« atribut
' uporabniško razširljiv ” dovoljuje ali ne dovoljuje uporabniku, da pomanjša ali poveča zaslon spletne strani z nastavitvijo vrednosti na “ št « ali » ja ”. Meta oznaka, ki uporabniku omogoča povečavo ali pomanjšanje, je:
< meta ime = 'viewport' vsebino = 'width=device-width, user-scalable=yes' >Kako uporabiti metaoznako Viewport za odzivno spletno oblikovanje v HTML?
Za boljše razumevanje uporabe metaoznake vidnega polja za odzivno spletno oblikovanje. Sprehodimo se skozi primer:
Recimo znotraj ' Po sestavljanju zgornjega delčka kode je spletna stran videti takole: Izhod prikazuje, da se vsebina ne odziva, ker se na majhnih napravah ne prikazuje popolnoma. Zdaj, da bo odziven, dodajte » vidno polje ” metaoznaka: Po posodobitvi kode je spletna stran na različnih velikostih zaslona videti takole: Končni rezultat kaže, da je spletna stran zdaj odzivna po dodajanju metaoznake znotraj » Metaoznaka vidnega polja omogoča razvijalcu, da brskalniku zagotovi nabor navodil, ki določajo, kako se spletna stran prikaže na napravah z različnimi velikostmi zaslona. Meta oznaka je nameščena znotraj ' ' oznaka: < div >
< str >
< b >Powered by Linuxhint, za boljše razumevanje metaoznake vidnega polja odprite spletno stran na drugem zaslonu velikost naprave.< / b >
< / str >
< img src = '../bg.jpg' vse = 'heker' premer = '460' višina = '3. 4. 5' >
< str stil = 'padding:5px' >
< jaz >Pridružite se skupini Linuxhint < / jaz >
Poganja Linuxhint, če želite bolje razumeti metaoznako vidnega polja, odprite spletno stran na drugem zaslonu velikost naprave. Poganja Linuxhint, če želite bolje razumeti metaoznako vidnega polja, odprite spletno stran na drugem zaslonu velikost naprave. Poganja Linuxhint, če želite bolje razumeti metaoznako vidnega polja, odprite spletno stran na drugem zaslonu velikost naprave. Poganja Linuxhint, če želite bolje razumeti metaoznako vidnega polja, odprite spletno stran na drugem zaslonu velikost naprave.
< / str >
< / div >
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1.0' / >
< / glavo >
Zaključek