Acest blog va explica cum să utilizați o metaetichetă de vizualizare pentru design web receptiv în HTML:
Ce este metaeticheta Viewport?
„ fereastra ” este cea mai importantă etichetă pentru a crea un design receptiv prin controlul modului în care conținutul apare pe diferite dimensiuni de ecran. Această etichetă este plasată în interiorul „
Diferite atribute ale metaetichetei Viewport
Metaeticheta de vizualizare are următoarele atribute care pot fi plasate ca valoare pentru „ conţinut ” atribut:
atributul „lățime”.
„ lăţime ” atributul specifică zona vizibilă a unei pagini web pentru conținut pe verticală. Metaeticheta sa arată astfel:
< meta Nume = 'vizor' conţinut = 'lățime=lățimea dispozitivului' >
atributul „înălțime”.
„ înălţime ” setează lungimea verticală a paginii web pentru a se asigura că înălțimea ferestrei de vizualizare se potrivește cu înălțimea ecranului. Metaeticheta sa arată astfel:
< meta Nume = 'vizor' conţinut = „înălțime=400” >
Atributul „Scală inițială”.
„ La scară inițială Atributul ” asigură că pagina web este afișată la un nivel de zoom adecvat la prima încărcare. De exemplu, accesați codul de mai jos:
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1.0” >atributul „scală maximă”.
„ la scară maximă ” atributul specifică nivelul maxim de zoom pentru pagina web pentru a preveni problemele de aspect:
< meta Nume = 'vizor' conţinut = „width=device-width, maximum-scale=1.0” >
atributul „scală minimă”.
„ la scară minimă ” este utilizat pentru a restricționa utilizatorul să micșoreze prea mult prin specificarea nivelului minim de scară de micșorare:
< meta Nume = 'vizor' conţinut = „width=device-width, minimum-scale=0.5” >atributul „scalabil de utilizator”.
„ scalabil de utilizator Atributul ” permite sau nu permite utilizatorului să micșoreze sau să mărească ecranul paginii web setând valoarea la ” Nu ” sau ” da ”. Metaeticheta care permite utilizatorului să mărească sau să micșoreze este:
< meta Nume = 'vizor' conţinut = „width=device-width, user-scalable=yes” >Cum să utilizați metaeticheta Viewport pentru design web receptiv în HTML?
Pentru a înțelege mai bine utilizarea unei metaetichete viewport pentru design web receptiv. Să trecem printr-un exemplu:
Să presupunem că în interiorul „ După compilarea fragmentului de cod de mai sus, pagina web arată astfel: Ieșirea arată că conținutul nu răspunde, deoarece nu este afișat perfect pe dispozitive mici. Acum, pentru a-l face receptiv, adăugați „ fereastra ” metaetichetă: După actualizarea codului, pagina web arată astfel pe diferite dimensiuni de ecran: Rezultatul final ilustrează faptul că pagina web este acum receptivă după adăugarea unei metaetichete în interiorul „ Metaeticheta de vizualizare permite dezvoltatorului să ofere browserului un set de instrucțiuni care stabilește modul în care pagina web este afișată pe dispozitive cu dimensiuni diferite de ecran. Metaeticheta este plasată în interiorul „ ' etichetă: < div >
< p >
< b >Produs de Linuxhint, pentru a înțelege mai bine metaeticheta viewportului, deschideți pagina web pe un ecran diferit mărimea dispozitive.< / b >
< / p >
< img src = „../bg.jpg” Tot = 'Hacker' lăţime = '460' înălţime = '3. 4. 5' >
< p stil = 'padding:5px' >
< i >Alăturați-vă echipei Linuxhint < / i >
Powered by Linuxhint, pentru a înțelege mai bine metaeticheta viewportului, deschideți pagina web pe un ecran diferit mărimea devices.Powered by Linuxhint, pentru a înțelege mai bine metaeticheta viewportului, deschideți pagina web pe un ecran diferit mărimea devices.Powered by Linuxhint, pentru a înțelege mai bine metaeticheta viewportului, deschideți pagina web pe un ecran diferit mărimea devices.Powered by Linuxhint, pentru a înțelege mai bine metaeticheta viewportului, deschideți pagina web pe un ecran diferit mărimea dispozitive.
< / p >
< / div >
< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1.0” / >
< / cap >
Concluzie