Der Titel dieses Artikels ist für die entstandene Lösung sicher überzogen – trotzdem hatte ich mal wieder Spaß an einer kleinen statischen Spielerei, die im Grunde nur entstanden ist, da ich für ein Projekt den Viewport haben wollte um besser für entsprechende Media Queries zu stylen. Die eigentliche Lösung wurde dann etwas erweitert und durch die Hilfe der Community, insbesondere Frederic und Jens, wurde der Iststand erreicht und kann in jeder Form genutzt werden.
Zum Testen von Media Queries nutze ich meine kleine iFrame-Anpassung, die mittels DOM Storage-API verschiedene Werte zulässt; mehr dazu im zugehörigen Artikel. Trotzdem wollte ich immer den aktuellen Stand haben und hatte mir daher mittels CSS an den body gehangen. Dies kann man einfach tun und ist für verschieden, die üblichen Verdächtigen, nun im Projekt integriert. Diese Aufgabe wird von einer einzelnen CSS-Datei übernommen – debug.css; so dass sie einfach inkludiert werden kann. Alternativ könnt ihr damit alles mögliche anfangen – forken und somit die Idee verbessern und mehr daraus machen.
Innerhalb der kleinen Spielerei sind diverse Anpassungen für Media Queries drin, so dass die Seite auch einen Effekt hat, wenn man die Größe des Browsers ändert bzw. mit verschiedenen Geräten auf die Seite gelangt. Dabei habe ich keinen Wert auf Schönheit gelegt, sondern eher Pragmatismus und Effekthascherei genutzt. So nutze ich Transition via CSS3 um das Verändern etwas animiert zu gestalten und so die Darstellung zu hübschen.
Schaut euch den Code einfach an, entweder direkt auf der Seite oder im Projekt auf github, wo ich alles abgelegt habe.
Für alle, denen noch der Zusammenhang fehlt; bitte einfach die Seite besuchen und den Browser in der Größe ändern; dabei die Ausgabe am oberen Rand beachten. Alternativ dieses kleine Video.
Mir ist klar, dass dies nicht die beste Lösung ist, da Media Queries in jeder erdenklichen Form auftauchen können und die Ausgabe den größten Nutzwert hat, wenn man die Ausgabe der optimierten Größe anpasst. Aber es stellt eine einfache und schnell Lösung dar. Alternativen sind vermutlich via JavaScript denkbar, die das Stylesheet parsen und anhand der gefunden Anweisungen zu Media Queries den Viewport auswerfen – aber diese Form erfordert etwas mehr zeit und Kraft; also schnell überzogen und in meinem Fall ist die vorgestellte Lösung vollkommen ausreichend; durch die Erweiterungen von Frederic sind auch noch andere Viewports eingeflossen und in diesem Zusammenhang habe ich mir bekannte typische Größen und Ausrichtungen integriert – Portrait und Landscape. Alles weitere seht ihr in der angesprochenen debug.css und direkt auf der Seite, die den Source des Stylesheets ausgibt.
Die Veränderung selbst sieht sehr cool aus, wobei der Benutzer selbst davon ja nie was mit bekommst. Denn der User surft ja immer in seiner Auflösung und spielt selten mit der Browsergrößer herum
Ist dann halt die Frage wie aufwendig die Realisierung von solchen Layouts ist und ob es wirklich ein Mehrwert ist. Ich kann mir schon vorstellen das man viele Dinge berücksichtigen muss... Vielleicht schaue ich es mir auch irgendwann mal an... Grüße, Tim
Ich find's auch interessant, aber wie der Vorredner auch wohl recht aufwendig. Wir haben uns ja jahrelang über Browserpluralismus beschwert als Entwickler, weil wir für Moz-IE-Co immer andere Dinge berücksichtigen mussten. Wenn das seinerzeit Pluralismus war, dann muss man ein neues Wort erfinden für die vielen Devices, die wir heute haben.
Kleiner Test, wegen Cache
Finde das Thema auch sehr spannend. Eigentlich die schönste Art auch mobile Endgeräte zu unterstützen. Kein doppelter Content und ein fließender Übergang von Desktop zum mobilen Internet. Bin vor einiger Zeit schon bei mediaqueri.es drüber gestolpert und wollte das Thema eben noch einmal genauer erforschen, aber ich habe bisher noch Angst vor dem Arbeitsaufwand.
Dein Artikel hat mich aber überzeugt das Ganze mal zu testen... Vielen Dank dafür.
Interessanter und praktikabler Ansatz. Allerdings erschließt sich mir, wie bei meinen Vorrednern, der direkte praktische Nutzen noch nicht. Aus Programmierersicht trotzdem ein reizvolles Thema.
Kannmich meinen Vorpostern absolut nur anschließen!
Es ist natürlich eine Spielerei, aber für Programmierer eine sehr reizvolle Spielerei
Mir gefällts und ich werde die Änderungen hier im Auge behalten!!
Ich finds auch eine interessante Spielerei. Und es muss ja nicht immer alles nur praktisch sein
Schöner Trick.
Habe eine Frage zu den genutzten Größen.
* 1200 pixels und * 1800 pixels, macht das Sinn?
Ist ein Wechsel von 1800 auf 1680 nicht sinnvoll?
Oder sollen damit nur die HD-User angesprochen werden?
@Sven: es geht nicht um jede Auflösung, eher um alles größer als - also HD User.