Was ist die Verwendung von Ansichtsfenster

Question

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Was passiert eigentlich auf setzen Sie dieses Meta-Tag in den Header?

Answer 1

Mobile Safari hat das "Viewport-Meta-Tag" eingeführt, damit Webentwickler die Größe und Skalierung des Ansichtsfensters steuern können.

Verwenden Sie das Viewport-Meta-Tag, um die Darstellung Ihres Web-Inhalts zu verbessern. In der Regel verwenden Sie das Viewport-Metatag, um die Breite und die Anfangsskala des Ansichtsfensters festzulegen. Wenn Ihre Webseite beispielsweise schmaler als 980 Pixel ist, sollten Sie die Breite des Ansichtsfensters auf Ihren Webinhalt einstellen. Wenn Sie eine Touch-spezifische Webanwendung für das Telefon oder entwerfen, legen Sie die Breite auf die Breite des Geräts fest.

ex: - <meta name="viewport" content="width=device-width, initial-scale=1">

Die Breite Eigenschaft steuert die Größe des Bildfensters. Es kann auf eine bestimmte Anzahl von Pixeln wie Breite = 600 oder auf den speziellen Wert Device-Breite eingestellt werden, die die Breite des Bildschirms in CSS-Pixel auf einer Skala von 100% ist. (Es sind entsprechende Höhe und geräteHöhenWerte, welche für Seiten mit Elementen sinnvoll sein kann, die Größe oder Position ändern, basierend auf dem Darstellungsfeld Höhe.)

Die anfänglichen angelegte Eigenschaft steuert die Zoomstufe, wenn die Seite ist, zuerst geladen. Die Eigenschaften Maximum Scale, Minimum Scale und User Scalable steuern, wie Benutzer die Seite vergrößern oder verkleinern dürfen.

Quellen: - MDN, developer.apple

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

A <meta> Darstellungselement gibt den Browser Anweisungen zur Kontrolle der Dimensionen und Skalierung der Seite.

Der width=device-width Teil legt die Breite der Seite auf die Bildschirmbreite des Geräts (die je nach Gerät variieren wird).

Der initial-scale=1.0 Teil legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.

Dieser Code betrifft nur die Ansicht im mobilen Browser. Sie können Unterschiede im mobilen Browser sehen.

Wenn Sie diesen Code in die Kopfzeile einfügen, wird Ihre Ansicht in einem beliebigen mobilen Browser nicht dieselbe Ansicht für den Desktop haben. Die Ansicht ändert sich jedoch entsprechend Ihrer Gerätebreite.