Hvordan bruger man Viewport Meta Tag til responsivt webdesign i HTML?

Hvordan Bruger Man Viewport Meta Tag Til Responsivt Webdesign I Html



Responsivt webdesign er teknikken til at designe hjemmesider, der ændrer sig i henhold til forskellige skærmstørrelser og enheder for at give en problemfri effekt til brugerne. Der er forskellige metoder, hvormed udvikleren kan gøre deres hjemmeside responsiv. En af disse metoder er brugen af ​​' viewport ” metatag. Dette tag har attributter som ' bredde ', ' højde ', ' indledende skala ” osv. Disse attributter hjælper på visse måder med at gøre webdesign responsivt.

Denne blog vil forklare, hvordan man bruger et viewport-metatag til responsivt webdesign i HTML:

Hvad er Viewport Meta Tag?

Det ' viewport ” er det vigtigste tag til at skabe et responsivt design ved at kontrollere, hvordan indholdet vises på forskellige skærmstørrelser. Dette tag er placeret inde i ' ” sektion, og den indeholder to attributter i den. Den første er ' navn ' attribut, som fortæller formålet med dette tag, og den anden er ' indhold ', der indeholder data relateret til værdien angivet i ' navn ' attribut.





Forskellige attributter for Viewport Meta Tag

Viewport-metatagget har følgende attributter, der kan placeres som en værdi for ' indhold ' attribut:



'width' attribut

Det ' bredde ”-attribut angiver det synlige område af en webside for indholdet lodret. Dens meta-tag ser sådan ud:



< meta navn = 'udsigtsport' indhold = 'width=device-width' >

'højde' attribut

Det ' højde ”-attribut indstiller den lodrette længde af websiden for at sikre, at viewport-højden matcher skærmhøjden. Dens meta-tag ser sådan ud:



< meta navn = 'udsigtsport' indhold = 'højde=400' >

'Initial-scale' attribut

Det ' Indledende skala ”-attributten sikrer, at websiden vises på et passende zoomniveau, når den første gang indlæses. Besøg for eksempel nedenstående kode:

< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1.0' >

'maksimal skala' attribut

Det ' maksimal skala ”-attribut angiver det maksimale zoomniveau for websiden for at forhindre layoutproblemer:



< meta navn = 'udsigtsport' indhold = 'width=device-width, maximum-scale=1.0' >

'minimum-skala' attribut

Det ' minimumsskala ” bruges til at begrænse brugeren i at zoome for meget ud ved at angive det minimale skalaniveau for zoom ud:

< meta navn = 'udsigtsport' indhold = 'width=device-width, minimum-scale=0.5' >

'bruger-skalerbar' attribut

Det ' bruger-skalerbar ” attribut tillader eller tillader ikke brugeren at få websideskærmen til at zoome ud eller zoome ind ved at indstille værdien til “ Ingen ' eller ' Ja ”. Metatagget, der giver brugeren mulighed for at zoome ind eller ud er:

< meta navn = 'udsigtsport' indhold = 'width=device-width, user-scalable=yes' >

Hvordan bruger man Viewport Meta Tag til responsivt webdesign i HTML?

For bedre at forstå brugen af ​​et viewport-metatag til responsivt webdesign. Lad os gennemgå et eksempel:

Antag inde i '

' tag der er flere '

' tags og billeder indsat på websiden ved hjælp af ' ' tag:

< div >

< s >

< b > Drevet af Linuxhint, for bedre at forstå viewport-metatagget, åbn websiden på en anden skærm størrelse enheder.< / b >

< / s >

< img src = '../bg.jpg' alt = 'Hacker' bredde = '460' højde = '3. 4. 5' >

< s stil = 'polstring: 5px' >

< jeg >Bliv medlem af Linuxhint-teamet < / jeg >

Drevet af Linuxhint, for bedre at forstå viewport-metatagget skal du åbne websiden på en anden skærm størrelse Enheder. Drevet af Linuxhint, for bedre at forstå viewport-metatagget åbner websiden på en anden skærm størrelse Enheder. Drevet af Linuxhint, for bedre at forstå viewport-metatagget åbner websiden på en anden skærm størrelse Enheder. Drevet af Linuxhint, for bedre at forstå viewport-metatagget åbner websiden på en anden skærm størrelse enheder.

< / s >

< / div >

Efter kompileringen af ​​ovenstående kodestykke ser websiden sådan ud:

Outputtet viser, at indholdet ikke er responsivt, da det ikke vises perfekt på små enheder.

For at gøre det responsivt skal du tilføje ' viewport ' meta tag:

< hoved >

< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1.0' / >

< / hoved >

Efter opdatering af koden ser websiden sådan ud på forskellige skærmstørrelser:

Det endelige output illustrerer, at websiden nu er responsiv efter tilføjelse af et metatag inde i ' ” tag.

Konklusion

Viewport-metatagget giver udvikleren mulighed for at levere et sæt instruktioner til browseren, som indstiller, hvordan websiden vises på forskellige skærmstørrelsesenheder. Metatagget er placeret inde i ' ” tag og indeholder attributter, der hjælper med at opbygge responsive hjemmesidedesigns. Denne blog har vist, hvordan man bruger et viewport-metatag til responsivt webdesign i HTML.

Andet

Kategori

Populære Indlæg

Sådan opretter du en virtuel Windows 11-maskine på Proxmox VE 8

Hvad er Amazon Simple Email Service og hvordan man bruger det?

Git Clone 'Støtte til adgangskodegodkendelse blev fjernet' fejl

Sådan bygger du en BCD til 7-segment displaydekoder

Sådan kalder du en kolonne i MATLAB

Opret en database i PostgreSQL ved hjælp af createb-kommandoen

Sådan markeres/fjernes afkrydsningsfeltet ved hjælp af JavaScript

Sådan løses fejlen 'Tilladelse nægtet (offentlig nøgle)'

Hvordan anvender man brudpunkter og medieforespørgsler på rækkegitter i medvind?

Sådan sammenlignes lokale og eksterne filialer i Git

Sådan installeres Synaptic på Raspberry Pi

Sådan bruges PHP-funktionen date_sunrise() og date_sunset()

Hvad er HTML DOM Style backgroundImage Property i JavaScript

5 måder at løse 'Bad Pool Caller' Blue Screen-fejl i Windows

Mestring af backticks i Linux Bash Scripts

Hvordan synkroniseres med et eksternt Git-lager?

Sådan sorteres du efter størrelse i Linux

Hvad er Android System WebView – hvordan deaktiveres det?

Grafen superkondensator

Linux-kommando til at oprette en tom fil i den aktuelle mappe