In diesem Blog wird erklärt, wie man ein Viewport-Meta-Tag für responsives Webdesign in HTML verwendet:
Was ist das Viewport-Meta-Tag?
Der ' Ansichtsfenster “ ist das wichtigste Tag, um ein ansprechendes Design zu erstellen, indem gesteuert wird, wie der Inhalt auf verschiedenen Bildschirmgrößen angezeigt wird. Dieses Tag wird innerhalb des „
Verschiedene Attribute des Viewport-Meta-Tags
Das Viewport-Meta-Tag hat die folgenden Attribute, die als Wert für „ Inhalt ” Attribut:
Attribut „Breite“.
Der ' Breite ”-Attribut gibt den sichtbaren Bereich einer Webseite für den Inhalt vertikal an. Sein Meta-Tag sieht so aus:
< Meta Name = 'Ansichtsfenster' Inhalt = 'Breite = Gerätebreite' >
Attribut „Höhe“.
Der ' Höhe ”-Attribut legt die vertikale Länge der Webseite fest, um sicherzustellen, dass die Viewport-Höhe mit der Bildschirmhöhe übereinstimmt. Sein Meta-Tag sieht so aus:
< Meta Name = 'Ansichtsfenster' Inhalt = 'Höhe = 400' >
Attribut „Anfangsmaßstab“.
Der ' Anfangsmaßstab ”-Attribut stellt sicher, dass die Webseite beim ersten Laden mit einer geeigneten Zoomstufe angezeigt wird. Besuchen Sie zum Beispiel den folgenden Code:
< Meta Name = 'Ansichtsfenster' Inhalt = 'Breite = Gerätebreite, Anfangsskalierung = 1,0' >Attribut „maximaler Maßstab“.
Der ' Maximalmaßstab ”-Attribut gibt die maximale Zoomstufe für die Webseite an, um Layoutprobleme zu vermeiden:
< Meta Name = 'Ansichtsfenster' Inhalt = 'Breite = Gerätebreite, maximale Skalierung = 1,0' >
Attribut „Minimalmaßstab“.
Der ' minimaler Umfang “ wird verwendet, um den Benutzer daran zu hindern, zu stark herauszuzoomen, indem die minimale Skalierungsstufe für das Herauszoomen angegeben wird:
< Meta Name = 'Ansichtsfenster' Inhalt = 'Breite=Gerätebreite, Mindestmaßstab=0,5' >Attribut „vom Benutzer skalierbar“.
Der ' Benutzer-skalierbar ”-Attribut erlaubt oder verbietet es dem Benutzer, den Bildschirm der Webseite zu verkleinern oder zu vergrößern, indem der Wert auf “ NEIN ' oder ' Ja “. Das Meta-Tag, mit dem der Benutzer hinein- oder herauszoomen kann, lautet:
< Meta Name = 'Ansichtsfenster' Inhalt = 'width=Gerätebreite, user-scalable=yes' >Wie verwende ich Viewport-Meta-Tags für Responsive Webdesign in HTML?
Um die Verwendung eines Viewport-Meta-Tags für responsives Webdesign besser zu verstehen. Gehen wir ein Beispiel durch:
Angenommen innerhalb des „ Nach der Kompilierung des obigen Codeschnipsels sieht die Webseite so aus: Die Ausgabe zeigt, dass der Inhalt nicht responsiv ist, da er auf kleinen Geräten nicht perfekt angezeigt wird. Um es jetzt responsiv zu machen, fügen Sie das „ Ansichtsfenster ” meta tag: Nach dem Aktualisieren des Codes sieht die Webseite auf verschiedenen Bildschirmgrößen so aus: Die endgültige Ausgabe zeigt, dass die Webseite jetzt nach dem Hinzufügen eines Meta-Tags innerhalb des „ Das Viewport-Meta-Tag ermöglicht es dem Entwickler, dem Browser eine Reihe von Anweisungen bereitzustellen, die festlegen, wie die Webseite auf Geräten mit unterschiedlichen Bildschirmgrößen angezeigt wird. Das Meta-Tag wird innerhalb des „
< P >
< B >Powered by Linuxhint, um das Viewport-Meta-Tag besser zu verstehen, öffnen Sie die Webseite auf einem anderen Bildschirm Größe Geräte.< / B >
< / P >
< Bild Quelle = '../bg.jpg' alles = 'Hacker' Breite = '460' Höhe = '3. 4. 5' >
< P Stil = 'polsterung:5px' >
< ich >Werden Sie Teil des Linuxhint-Teams < / ich >
Powered by Linuxhint, um das Viewport-Meta-Tag besser zu verstehen, öffnen Sie die Webseite auf einem anderen Bildschirm Größe Geräte. Unterstützt von Linuxhint, um das Viewport-Meta-Tag besser zu verstehen, öffnen Sie die Webseite auf einem anderen Bildschirm Größe Geräte. Unterstützt von Linuxhint, um das Viewport-Meta-Tag besser zu verstehen, öffnen Sie die Webseite auf einem anderen Bildschirm Größe Geräte. Unterstützt von Linuxhint, um das Viewport-Meta-Tag besser zu verstehen, öffnen Sie die Webseite auf einem anderen Bildschirm Größe Geräte.
< / P >
< / div >
< Meta Name = 'Ansichtsfenster' Inhalt = 'Breite = Gerätebreite, Anfangsskalierung = 1,0' / >
< / Kopf >
Abschluss