Questo blog spiegherà come utilizzare un meta tag viewport per il responsive web design in HTML:
Che cos'è il metatag Viewport?
IL ' finestra ' è il tag più importante per creare un design reattivo controllando come il contenuto viene visualizzato su schermi di dimensioni diverse. Questo tag è posizionato all'interno del '
Diversi attributi del meta tag Viewport
Il meta tag viewport ha i seguenti attributi che possono essere inseriti come valore per ' contenuto 'attributo:
attributo 'larghezza'.
IL ' larghezza L'attributo ” specifica l'area visibile di una pagina web per il contenuto verticalmente. Il suo meta tag è simile a questo:
< meta nome = 'finestra' contenuto = 'larghezza=larghezza dispositivo' >
attributo 'altezza'.
IL ' altezza L'attributo ” imposta la lunghezza verticale della pagina Web per garantire che l'altezza del viewport corrisponda all'altezza dello schermo. Il suo meta tag è simile a questo:
< meta nome = 'finestra' contenuto = 'altezza=400' >
Attributo 'scala iniziale'.
IL ' Scala iniziale L'attributo ” garantisce che la pagina Web venga visualizzata con un livello di zoom appropriato al primo caricamento. Ad esempio, visita il codice seguente:
< meta nome = 'finestra' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1.0' >Attributo 'scala massima'.
IL ' scala massima L'attributo ' specifica il livello massimo di zoom per la pagina Web per evitare problemi di layout:
< meta nome = 'finestra' contenuto = 'larghezza=larghezza dispositivo, scala massima=1.0' >
Attributo 'scala minima'.
IL ' scala minima ' viene utilizzato per impedire all'utente di ridurre troppo lo zoom specificando il livello minimo di riduzione dello zoom:
< meta nome = 'finestra' contenuto = 'larghezza=larghezza dispositivo, scala minima=0,5' >Attributo 'scalabile dall'utente'.
IL ' scalabile dall'utente L'attributo 'consente o meno all'utente di ridurre o ingrandire la schermata della pagina Web impostando il valore su' NO ' O ' SÌ ”. Il meta tag che consente all'utente di ingrandire o ridurre è:
< meta nome = 'finestra' contenuto = 'larghezza=larghezza dispositivo, scalabilità utente=sì' >Come utilizzare il meta tag Viewport per il responsive web design in HTML?
Comprendere meglio l'utilizzo di un meta tag viewport per il responsive web design. Facciamo un esempio:
Supponiamo che all'interno del ' Dopo la compilazione del suddetto frammento di codice, la pagina web si presenta così: L'output mostra che il contenuto non è reattivo in quanto non viene visualizzato perfettamente su dispositivi di piccole dimensioni. Ora per renderlo reattivo aggiungi il ' finestra meta tag: Dopo aver aggiornato il codice, la pagina web appare così su schermi di diverse dimensioni: L'output finale illustra che la pagina Web è ora reattiva dopo l'aggiunta di un meta tag all'interno del ' Il meta tag viewport consente allo sviluppatore di fornire una serie di istruzioni al browser che imposta il modo in cui la pagina Web viene visualizzata su dispositivi di dimensioni dello schermo diverse. Il meta tag è posizionato all'interno del '
< P >
< B > Alimentato da Linuxhint, per comprendere meglio il meta tag del viewport, apri la pagina Web su uno schermo diverso misurare dispositivi.< / B >
< / P >
< imm src = '../bg.jpg' qualunque cosa = 'Pirata' larghezza = '460' altezza = '3,4,5' >
< P stile = 'imbottitura: 5px' >
< io >Unisciti al team di Linuxhint < / io >
Alimentato da Linuxhint, per comprendere meglio il meta tag del viewport, apri la pagina Web su uno schermo diverso misurare devices.Powered by Linuxhint, per comprendere meglio il meta tag del viewport, apri la pagina Web su uno schermo diverso misurare devices.Powered by Linuxhint, per comprendere meglio il meta tag del viewport, apri la pagina Web su uno schermo diverso misurare devices.Powered by Linuxhint, per comprendere meglio il meta tag del viewport, apri la pagina Web su uno schermo diverso misurare dispositivi.
< / P >
< / div >
< meta nome = 'finestra' contenuto = 'larghezza=larghezza-dispositivo, scala-iniziale=1.0' / >
< / Testa >
Conclusione