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.

Responsive Webdesign – Grundlagen

width und device-width bei Desktops und Smartphones

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
width und device-width verhalten sich auf Smartphones ganz anders, als auf Desktop-Rechnern. Einen zusätzlichen Einfluss darauf hat die Viewport-Meta-Angabe.

Transkript

Width und Device-Width sind jetzt zwei abfragbare Eigenschaften bei Media Queries. Was aber genau ist der Unterschied zwischen beiden? Das ist eine ganz wichtige Frage. Besonders da sich hier auch Desktop- Rechner anders verhalten als Smartphones. Ich habe hier ein kleines Beispiel vorbereitet, wo ich mit JavaScript den Wert für Width und Device-Width auslese und dann ausgeben lasse. Also, Sie sehen hier ein ganz einfaches JavaScript-Beispiel. Ich habe hier ein Element, per CSS ein bisschen formatiert, dass die Schrift größer ist. Und zum einen, lasse ich jetzt die Breite und die Gerätebreite, dass dieses Device-Width auslesen. Wenn wir dieses hier einmal im Browser ausführen, dann sehen wir: Device-Width: 1280, das ist wirklich die Breite meines Monitors. Und Width - das ist jetzt das aktuelle Browser-Fenster. Ich habe das jetzt nicht, dass es sich das automatisch aktualisiert. Aber wenn ich es jetzt hier einmal aktualisiere, dann hat sich das geändert, weil dieses Width sich wirklich auf die Breite des Browser-Fensters hier, auf einen Desktop-Rechner bezieht. Sie sehen hingegen Device-Width bleibt immer gleich. Soweit ist alles ganz klar. Und wenn wir eben jetzt mit Media Queries verschiedene Formatierungen machen wollen, die beispielsweise nicht nur jetzt an Smartphones denken: diese kleinen Bildschirme berücksichtigen, sondern eben auch verschiedene Formatierungen für riesige Bildschirme und mittelgroße etc., dann ist Width ja schon mal eine sehr gute Eigenschaft. Weil es interessiert mich ja, wie groß das Browser-Fenster ist, nicht wie viel Platz an sich zur Verfügung wäre. Schauen wir uns aber dieses Beispiel hier einmal an, wie das auf einem Smartphone aussehen würde. Und ich habe dafür einmal einen kleinen Opera Mobile-Emulator hier herangezogen. Das hier einmal geöffnet. Und Sie sehen jetzt die ausgelesenen Eigenschaften. Ich habe jetzt hier simuliertes Opera Mobile auf Samsung, läuft. Und dann habe ich hier für die Breite, für Width 980 Pixel und für Device-Width 480. Device-Width 480 Pixel - das klingt ganz realistisch. Das können wir uns gut vorstellen, dass das passt. Aber wie, um Gottes Willen, kommen diese 980 Pixel zu Stande? Das ist ja viel mehr, als hier Platz hat. Also, wenn wir uns umgängiges Smartphone vorstellen, das sind ja nicht 980 Pixel. Der Grund hierfür liegt darin, dass Smartphones standardmäßig, wenn wir nichts anderes angeben, Seiten klein skalieren, sodass die gesamt auf den Bildschirm passen. Das können Sie sich beispielsweise hier auch anschauen, wenn wir zu so einer Web-Seite gehen, hier wie video2brain, die jetzt nicht speziell irgendetwas macht für Smartphones oder andere mobile Geräte. Und dann sehen Sie: wird das auf einem Smartphone gesamt in der Übersicht dargestellt. Und der Benutzer kann, wenn ihn jetzt einzelne Teile interessieren, auf die klein zoomen, aber er sieht das eben ganz klein gemacht, sodass er den Überblick hat und alles auf einmal sieht. Und das ist diese Breitenangabe wie hier. Diese 980 Pixel heißt, dass standardmäßig eben 980 Pixel dargestellt werden können, eben wie wir hier sehen: so ausgezoomt. Wir wollen das nochmal an einem kleinen anderen Beispiel anschauen, was da Smartphones standardmäßig machen. Und ich habe hier jetzt noch ein weiteres Beispiel vorbereitet. Da habe ich jetzt zwei Absätze. Der eine hat hier den Text 320px, der andere hat den Text 100%. Und das sind auch die Breitenangaben, die ich per CSS zugewiesen habe. Also, dieser hier hat eine Breite von 320 Pixel. Und dieser hier hat eine Breite von 100 Pixel. Wenn wir uns das im Browser anschauen, wenig Überraschung. 320 Pixel sind so breit und das hier sind 100%. Schauen wir uns auch dieses Beispiel einmal in einem Emulator hier an. Und gehen dann hierhin, um uns das hier anzuschauen. Dann sehen Sie das Phänomen, was wir eben schon bei der anderen Web-Seite bemerkt hatten. Die 320 Pixel sind relativ schmal, weil eben alles so verkleinert wird, dass alles draufpasst, das heißt diese 320 Pixel sind jetzt so klein. Wenn wir uns aber jetzt vorstellen, dass wir Web-Seiten gestalten wollen, die auch besser nutzbar sind auf Smartphones, dann wollen wir uns ja explizit darum kümmern. Und dann passt das natürlich nicht, dass wir immer diesen Übersichts-Modus haben. Weil dann wollen wir die Sachen so arrangieren, dass direkt in einer angenehmen lesbaren Größe alles zu sehen ist. Und das heißt wir wollen diese Skalierung, die automatisch stattfindet, ausschalten. Und das können wir. Dafür gibt es eine besondere Angabe, das ist eine Meta-Angabe. Und ich habe jetzt dieses Beispiel, was wir gerade angesehen haben, einmal um diese Meta-Angabe ergänzt. Sie sehen: das ist dieses Beispiel hier. Und jetzt ist hier dazugekommen eine Meta-Angabe. Meta-Angaben schreibt man, wie gewohnt in den Head-Bereich des Dokuments. Üblicherweise sollte der Zeichensatz als erster stehen, deswegen ist es eine gute Art die Meta-Angabe hier zum Beispiel danach zu schreiben. Und diese Meta-Angabe sieht jetzt so aus, dass ich den Namen Viewport angebe und dann bei content zum Beispiel hier: width is gleich device-width. Wenn ich jetzt das Beispiel in einem Desktop-Browser ansehe, dann sieht es genauso aus, wie das Beispiel ohne diese Meta-Angabe. Also, diese Meta-Angabe hat auf dem Desktop-Rechner überhaupt keine Auswirkung. Aber sie wirkt sich auf Smartphones aus. Und das wollen wir uns jetzt hier einmal ansehen. Das war hier das ursprüngliche Beispiel. Wenn ich jetzt hingegen diese Meta- Angabe ergänze, dann sieht das so aus. Dann sehen Sie: es ist jetzt nicht mehr dieser Übersichts-Modus, sondern es ist alles nicht mehr so verkleinert, sondern einfach auf einer normalen Größe. Und beides mal: einmal haben wir die Angabe von 100%, das andere mal - von 320 Pixel. Die sind jetzt beide gleich groß. Und Sie sehen: der Text wäre auch gut zu lesen. Das ist also, eine gute Basis, um damit zu arbeiten. Das heißt, wenn wir Web-Seiten speziell für Smartphones auch erstellen, dann müssen wir immer diese standardmäßige Skalierung ausschalten. Kommen wir nochmal zurück zur Frage vom Verhältnis von Width und Device-Width. Das ändert sich eben, wenn Sie diese Meta-Angabe machen. Ich hatte ja ein kleines Beispiel erstellt, wo ich per JavaScript diese Angaben Width und Device-Width auslese. Und wenn ich da jetzt die Meta-Angabe ergänze. Das ist hier. Sehen Sie hier: ist diese Meta-Angabe ergänzt. Und dann das hier nochmal aufrufe, dann sehen Sie, dass Width jetzt plötzlich einen Wert von 320 Pixel hat. Das ist ja auch was wir eben gesehen haben. Das Element, dem ich eine Breite von 320 Pixeln zugewiesen habe, war mit dieser Meta-Angabe eben auch bildschirmfüllend. Vielleicht fällt Ihnen hier auch zurecht auf, dass die Angabe Width - Device-Width ja theoretisch heißen müsste, dass die jetzt gleich sind. Das ist de facto nicht so. Sondern es bewirkt einfach, dass diese Skalierung abgeschaltet wird und dass das Ganze auf einen vernünftigen Wert gesetzt wird. Was der Hersteller einfach davon ausgeht, was ein vernünftiger Wert ist. Und oft sind es diese 320 Pixel. Das liegt daran, dass einfach das iPhone hier auf 320 Pixel setzt und sich daran auch viele orientieren. Das heißt für unser Responsive Web Design und unsere Responsive Layouts, wir müssen ja auf jeden Fall die Skalierung ausschalten. Und wenn wir die Skalierung ausschalten über diese Meta-Angabe, dann ist dieser bei Width ermittelter Wert auch vernünftig um darauf basierend Media Queries zu gestalten. Eine kleine Zusammenfassung. Also, Device-Width ist die Gerätebreite bei Smartphones. Der Viewport bei Smartphones ist das, was man mit Width abfragt. Und das ist normalerweise der darstellbare Bereich, wenn die Seite ganz klein skaliert ist. Das sind dann die Größen um 900 Pixel. Wenn wir aber diese Skalierung ausschalten, und das machen wir durch eine Meta Viewport-Angabe. Und das sollten wir immer beim Responsive Web Design machen. Dann wird Width auf einen vernünftigen Wert gesetzt. Meine Empfehlung ist auch für die Arbeit mit Media Queries, dass Sie zum einen, die Viewport-Angabe setzen und dann Width zur Abrage der Breite nehmen.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!