Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML-Tipps für Webentwickler: Jede Woche neu

Viewport-Steuerung – inklusive shrink-to-fit=no

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
05:14
  Lesezeichen setzen

Transkript

Die viewport-Meta-Angabe unterbindet das allgemeine Skalieren von Smartphones. Das ist bekannt. Aber wissen Sie auch, was die Ergänzung shrink-to-fit=no" macht? Die viewport-Meta-Angabe steht im Kopfbereich und Sie hat nur eine Auswirkung bei Smarthphones & Co. Sie hat keine Auswirkung auf Desktops. Hier sehen Sie ein kleines Beispiel im Vergleich. Ohne diese Meta-Angabe würde das Dokument, was ein Element mit 320px Breite hat und ein Element mit 100% Breite, so auf einem Iphone dargestellt. Wenn ich hingegen die viewport-Meta-Angabe ergänze, dann ist das nicht automatisch skaliert, sondern die 320px beispielsweise füllen diesen Bereich aus und 100% ist genauso Breit. Das heißt, diese Angabe ist sinnvoll für Smartphones, wenn man responsives Webdesign macht. Ich hätte eben nur angegeben: width=device-width, man kann aber jetzt noch mehr spezifizieren, man kann eine Anfang Skalierung festlegen, man kann eine minimale Skalierung festlegen, man kann eine maximale Skalierung festlegen und auch sagen user-scalable=no". Diese maximale Skalierung und user-scalable=no" kann man natürlich verwenden, um die Skalierung durch den Benutzer zu unterbinden, das heißt, der Benutzer kann da nicht ein Bereich größer machen. Wenn wir unterbinden wollen, dass ein Benutzer skaliert, dann können wir schreiben initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0. Erst aber wichtig, an dieser Stelle wird ein Komma geschrieben, und nicht ein Strichpunkt. Die Skalierung zu unterbinden, sollten Sie bei normalen Webseiten nicht machen, denn, wenn ein Benutzer gerne ein Bereich sich vergrößern möchte, dann macht er das nicht, um dem Design zu schaden, sondern weil es damit besser lesen kann beispielsweise die Angabe kann hingegen sinnvoll sein bei irgendeinem Browserspiel, wo die Funktionalität einfach nicht gegeben ist, in dem Moment, wenn der Benutzer auch selbst zoomen kann. Jetzt gibt es noch weitere Angaben, die sinnvoll sind. Eigentlich müsste die Angabe width=device-width reichen, aber es wird empfohlen zusätzlich initial-scale=1 anzugeben. Und das liegt daran, dass dann manche Systeme sich besser verhalten, wenn der Modus gewechselt wird. Da sehen Sie die Angabe ohne scale=1. Und hier unten dann, wirkt das ruhiger, wenn man dieses initial-scale=1 setzt. Aber es gibt noch mehr und noch mehr Besonderheiten für den Internet Explorer 10. Sollten Sie die viewport-Angabe auch noch in CSS setzten über die Angabe @-ms-viewport{ width=device-width, damit er dieses auch wirklich ausliest. Das wird beispielsweise dann auch bei bootstrap=4 benutzt im Stylesheet. Also zusätzlich braucht man noch eine Angabe per CSS. APOPO Bootstrap. Wenn Sie da sich anschauen welche viewport-Variante die verwenden, dann sehen Sie noch zusätzlich die Angabe shrink-to-fit=no". shrink-to-fit=no" ist eine sinnvolle Ergänzung bei der viewport-Angabeglid, aber nur für Safari ab IOS Version 9, und dann im Split- oder Seit View-Modus. Das ist so ein Modus, wo man mehrere Apps gleichzeitig nutzen kann, und dann sind auch zwei Fenster beispielsweise geöffnet. Und in diesem Fall beeinflusst die Angabe shrink-to-fit wie sich Elemente verhalten sollen, und zwar Elemente, die eine feste Breite haben und breiter sind als der im Split- oder Seit View-Modus zur Verfügung stehender Platz. Wenn man das nicht angibt, dann wird alles so verkleinert, dass diese großen Elemente auf den Platz passen. Und das bedeutet eventuell natürlich auch, dass der Text zu klein wird. Und wenn man hingegen ergänzt dieses shrink-to-fit=no", dann findet die Verkleinerung nicht statt. Damit gibt es folgende Empfehlung für die viewport-Meta-Angabe. Also ein mal width=device-width, initial-scale=1 und shrink-to-fit=no". Und außerdem sollten Sie die viewport-Steuerung für den Internet Explorer 10 auch im Stylesheet selbst setzten über diese Angabe @-ms-viewport{.