it-swarm.com.de

Wie wird das Meta-Viewport-Tag verwendet und was bewirkt es?

  1. Welche Browser unterstützen dieses Meta-Tag?
  2. Wie benutze ich es?
  3. Bedeutet dies, dass alle meine Probleme mit der Größenänderung von Mobiltelefonen gelöst werden?

Wenn jemand darauf antworten könnte, wäre dies eine große Hilfe für Neulinge

<meta="viewport">
25
Kyle Yeo
  1. Die Unterstützung des Viewport-Browsers ist ein wenig allgemein. Ich zeige Sie auf die Quirksmode-Seite für die Unterstützung des Viewport-Browsers für alle Details.
  2. Sie verwenden das Viewport-Meta-Tag wie jedes andere Meta-Tag. Setzen Sie den Codeblock direkt in den <head>.
  3. Ziemlich viel, aber auch hier ein kleiner Schluck. Ich empfehle einige Artikel lesen , die bewährten Methoden für W3 Mobile für Webdesign lesen oder die aktuellen W3-Entwurfsspezifikationen für das Viewport-Attribut für das Tag <meta> .

Kurz gesagt, das Hinzufügen dieser Zeile zu einer Website, die Viewport-Skalierung implementieren soll, sollte die meisten Probleme beheben. (kopiert aus WebDesignTuts + "Quick Tip: Vergessen Sie den Viewport-Meta-Tag-Artikel" )

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

P.S. Quirksmode hat auch ein ziemlich wunderbarer Artikel, der das Problem beschreibt , der es wert ist zu lesen, um zu verstehen, warum dies hilfreich sein kann.

21
Nightfirecat

Ein weiterer Artikel über das Meta-Ansichtsfenster, seine verschiedenen Eigenschaften und seine Verwendung in Ihren Entwürfen ist http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Es gibt auch ein Slidedeck Erklärungen im Detail und ein Github-Repo dazu. 

Haftungsausschluss: Ich bin der Autor dieser Ressourcen.

6
andreasbovens

Sie können alle Details aus Mozilla Blog anzeigen

https://developer.mozilla.org/de/Mobile/Viewport_meta_tag

3
Miqdad Ali

Meta Viewport-Tag wird verwendet, um die Größe und Sichtbarkeit der Website entsprechend der Größe des Anzeigebildschirms anzupassen. Es hilft der Webseite, automatisch in Android, Tablet oder iPhone zu passen.

0