Aquest bloc explicarà com utilitzar una metaetiqueta de viewport per al disseny web responsiu en HTML:
Què és la metaetiqueta Viewport?
El ' mirador ” és l'etiqueta més important per crear un disseny responsiu controlant com apareix el contingut en diferents mides de pantalla. Aquesta etiqueta es col·loca dins del '
Diferents atributs de la metaetiqueta de la finestra gràfica
La metaetiqueta de la finestra gràfica té els atributs següents que es poden col·locar com a valor per a ' contingut ” atribut:
atribut 'amplada'.
El ' amplada ” l'atribut especifica l'àrea visible d'una pàgina web per al contingut verticalment. La seva metaetiqueta té aquest aspecte:
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu' >
atribut 'alçada'.
El ' alçada ” estableix la longitud vertical de la pàgina web per assegurar-se que l'alçada de la finestra gràfica coincideix amb l'alçada de la pantalla. La seva metaetiqueta té aquest aspecte:
< meta nom = 'mirador' contingut = 'alçada=400' >
Atribut 'escala inicial'.
El ' Escala inicial ” assegura que la pàgina web es mostra amb un nivell de zoom adequat quan es carrega per primera vegada. Per exemple, visiteu el codi següent:
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1,0' >atribut 'escala màxima'.
El ' d'escala màxima L'atribut especifica el nivell de zoom màxim per a la pàgina web per evitar problemes de disseny:
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala màxima=1,0' >
atribut 'escala mínima'.
El ' d'escala mínima ” s'utilitza per restringir que l'usuari s'allunyi massa especificant el nivell d'escala d'ampliació mínim:
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala mínima=0,5' >Atribut 'escalable per l'usuari'.
El ' escalable per l'usuari L'atribut 'permet o no permet que l'usuari redueixi o apropi la pantalla de la pàgina web establint el valor a ' no ' o ' sí ”. La metaetiqueta que permet a l'usuari ampliar o reduir és:
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escalable per l'usuari=sí' >Com utilitzar la metaetiqueta Viewport per al disseny web responsiu en HTML?
Per entendre millor l'ús d'una metaetiqueta de viewport per al disseny web responsive. Passem per un exemple:
Suposem que dins del ' Després de la compilació del fragment de codi anterior, la pàgina web té aquest aspecte: La sortida mostra que el contingut no respon, ja que no es mostra perfectament en dispositius petits. Ara, per fer-ho sensible, afegiu el ' mirador ” metaetiqueta: Després d'actualitzar el codi, la pàgina web té aquest aspecte en diferents mides de pantalla: La sortida final il·lustra que la pàgina web ara respon després d'afegir una metaetiqueta dins del ' La metaetiqueta de la finestra gràfica permet al desenvolupador proporcionar un conjunt d'instruccions al navegador que estableix com es mostra la pàgina web en dispositius de diferents mides de pantalla. La metaetiqueta es col·loca dins del ' ' etiqueta: < div >
< pàg >
< b > Desenvolupat per Linuxhint, per entendre millor la metaetiqueta de la finestra gràfica, obriu la pàgina web en diferents pantalles mida dispositius.< / b >
< / pàg >
< img src = '../bg.jpg' tot = 'Hacker' amplada = '460' alçada = '345' >
< pàg estil = 'encoixinat: 5px' >
< i >Uneix-te a l'equip de Linuxhint < / i >
Desenvolupat per Linuxhint, per entendre millor la metaetiqueta de la finestra gràfica, obriu la pàgina web a una pantalla diferent mida dispositius. Desenvolupat per Linuxhint, per entendre millor la metaetiqueta de la finestra gràfica, obriu la pàgina web en diferents pantalles mida dispositius. Desenvolupat per Linuxhint, per entendre millor la metaetiqueta de la finestra gràfica, obriu la pàgina web en diferents pantalles mida dispositius. Desenvolupat per Linuxhint, per entendre millor la metaetiqueta de la finestra gràfica, obriu la pàgina web en diferents pantalles mida dispositius.
< / pàg >
< / div >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1,0' / >
< / cap >
Conclusió