HTML5: CSS und JavaScript einbinden, Meta-Viewport-Tag

Diese kleine Übersicht gibt einen schnellen Zugriff auf die wichtigsten HTML5-Tags, um Ressourcen (CSS und JavaScript) einzubinden und für responsive Projekte die Viewport-Behandlung korrekt einzustellen.

Viewport einstellen

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

Obwohl viewport als Wert für das name-Attribut noch in keinster Weise standardisiert ist, wird es von allen relevanten Browsern (auf Mobilgeräten) unterstützt.

Der Tag bewirkt, dass die Browser die Seite in der Größe der Gerätepixel anzeigen und nicht versuchen eine große Seite herunter zu skalieren. Peter Paul Koch erklärt die Zusammenhänge hervorragend.

In manchen Projekten ist es notwendig die weiteren Angaben wie user-scalableminimum-scale und maximum-scale zu nutzen.

CSS einbinden

Die Angabe des type-Attributs (type="text/css") ist nicht notwendig, da es lediglich einen Hinweis für den Browser darstellt mit welchem MIME-Type er bei der externen Ressource rechnen muss. 

Es kommt letztlich auf die Ressource selbst an, welchen Content-Type sie zurückliefert. Der Browser entscheidet dann, ob dieser mit dem Link-Typen stylesheet »verträglich« ist und beim Rendering berücksichtigt wird.

JavaScript einbinden

  ...
  <script src="scripts.js"></script>
</body>

Das type-Attribut am script-Tag verhält sich ähnlich wie bei CSS. Es ist eine Angabe über den MIME-Type der verlinkten Skript-Datei für den User Agent. Wird sie weggelassen, nimmt der Browser standardmäßig type="text/javascript" an.

Das End-Tag darf bei script nicht weggelassen werden.

Kommentare

  1. Wie sinnvoll ist Mobile First in der Webentwicklung?

    […] Dies passiert, in dem man seine Website zunächst für ein kleines und schwaches Gerät aufbaut (Viewport Meta-Tag nicht vergessen) und sie dann sukzessive vergrößert und mit Funktionen anreichert, die von […]

    Antworten

Kommentar abgeben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.