In deze blog wordt uitgelegd hoe u een viewport-metatag gebruikt voor responsief webdesign in HTML:
Wat is de Viewport-metatag?
De ' uitkijk postje ” is de belangrijkste tag om een responsief ontwerp te maken door te bepalen hoe de inhoud op verschillende schermformaten wordt weergegeven. Deze tag is geplaatst in de '
Verschillende kenmerken van Viewport-metatag
De viewport-metatag heeft de volgende attributen die als waarde voor de “ inhoud ” attribuut:
'breedte' attribuut
De ' breedte ” attribuut specificeert het zichtbare gebied van een webpagina voor de inhoud verticaal. De metatag ziet er als volgt uit:
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte' >
'hoogte' attribuut
De ' hoogte ” attribuut stelt de verticale lengte van de webpagina in om ervoor te zorgen dat de viewporthoogte overeenkomt met de schermhoogte. De metatag ziet er als volgt uit:
< meta naam = 'uitkijk postje' inhoud = 'hoogte=400' >
Attribuut 'Initial-scale'
De ' Eerste schaal ” attribuut zorgt ervoor dat de webpagina wordt weergegeven op een geschikt zoomniveau wanneer deze voor het eerst wordt geladen. Bezoek bijvoorbeeld de onderstaande code:
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, beginschaal=1.0' >attribuut 'maximale schaal'.
De ' maximale schaal ” attribuut specificeert het maximale zoomniveau voor de webpagina om lay-outproblemen te voorkomen:
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, maximale schaal=1.0' >
kenmerk 'minimale schaal'.
De ' minimale schaal ” wordt gebruikt om te voorkomen dat de gebruiker te veel uitzoomt door het minimale schaalniveau voor uitzoomen op te geven:
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, minimale schaal=0,5' >attribuut 'door de gebruiker schaalbaar'.
De ' door de gebruiker schaalbaar ” attribuut staat de gebruiker toe of niet om het webpaginascherm te laten uitzoomen of inzoomen door de waarde in te stellen op “ Nee ' of ' Ja ”. De metatag waarmee de gebruiker kan in- of uitzoomen is:
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, gebruiker-schaalbaar=ja' >Hoe gebruik je de Viewport-metatag voor responsief webdesign in HTML?
Om het gebruik van een viewport-metatag voor responsief webontwerp beter te begrijpen. Laten we een voorbeeld doornemen:
Stel dat binnen de ' Na de compilatie van het bovenstaande codefragment ziet de webpagina er als volgt uit: De uitvoer geeft aan dat de inhoud niet reageert omdat deze niet perfect wordt weergegeven op kleine apparaten. Om het nu responsief te maken, voegt u de ' uitkijk postje ” metatag: Na het updaten van de code ziet de webpagina er op verschillende schermformaten zo uit: De uiteindelijke uitvoer illustreert dat de webpagina nu responsief is na de toevoeging van een metatag in de ' Met de viewport-metatag kan de ontwikkelaar een reeks instructies aan de browser geven die bepaalt hoe de webpagina wordt weergegeven op apparaten met verschillende schermformaten. De metatag wordt geplaatst in de ' ' label: < div >
< P >
< B > Mogelijk gemaakt door Linuxhint, om de viewport-metatag beter te begrijpen, opent u de webpagina op een ander scherm maat apparaten.< / B >
< / P >
< img src = '../bg.jpg' alles = 'Hacker' breedte = '460' hoogte = '3. 4. 5' >
< P stijl = 'opvulling:5px' >
< i >Word lid van het Linuxhint-team < / i >
Aangedreven door Linuxhint, om de viewport-metatag beter te begrijpen, opent u de webpagina op een ander scherm maat devices.Powered by Linuxhint, om de viewport-metatag beter te begrijpen, opent u de webpagina op een ander scherm maat devices.Powered by Linuxhint, om de viewport-metatag beter te begrijpen, opent u de webpagina op een ander scherm maat devices.Powered by Linuxhint, om de viewport-metatag beter te begrijpen, opent u de webpagina op een ander scherm maat apparaten.
< / P >
< / div >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, beginschaal=1.0' / >
< / hoofd >
Conclusie