Dieser Test vermittelt nur einen ersten Eindruck wie eine Webseite auf unterschiedlichen Ausgabegeräten aussehen kann. Sie ersetzt nicht den Test auf tatsächlichen Ausgabegeräten!

Die Idee für diesen Test ist ursprünglich von Justin Avery . Den original Code finden Sie auf Github . Der hier verwendete Code wurde dieser Webseite angepasst und geändert.

Die Änderungen am Code

Da im Original bereits mit CSS "transition" und "transform" gearbeitet wird nutzen wir das natürlich auch für die Vergrößerung der Elemente. So erfordert das Ganze nur wenige Zeilen Code.

Als Erstes erhält jedes Gerät eine "id" über welche wir den umschließenden "<div>" mit dem Hintergrundbild und den zugehörigen "iframe" per JQuery ansprechen können.

<div id="idmobile" class="mobile">
	<iframe id="mobile" src="http://www.andre-cosmetic.de"></iframe>
</div>

Dann benötigen wir in unserer CSS-Datei eine neue Klasse welche wir mit JQuery per Klick auf das Hintergrundbild des jeweiligen Gerätes zuordnen.

Über "transition: 0.9s" steuern wir die Animationsdauer. Mit "transform: scale(3.5)" steuern wir die Transformation. Es wird mit "scale" also skaliert. Der Faktor wird in der Klammer mit (3.5) festgelegt. Ist nur ein Wert angegeben so wird proportional Skaliert. Mit zwei Werten (3.5, 1.5) würde unproportional Skaliert werden.

Mit "transform-origin" geben wir die Achse an von welcher die Transformation ausgeht. Die Position muß immer "position: relative" sein! Zusätzlich soll das jeweilige Gerät in den Vordergrund gebracht werden was mit "z-index: 9 important!" erledigt ist.

.mtrans {
	-webkit-transition: 0.9s;
	transition: 0.9s;
	transform: scale(3.5);
	-webkit-transform: scale(3.5);
	-o-transform: scale(3.5);
	-ms-transform: scale(3.5);
	-moz-transform: scale(3.5);
	transform-origin: -25% 100%;
	-webkit-transform-origin: -25% 100%;
	-o-transform-origin: -25% 100%;
	-ms-transform-origin: -25% 100%;
	-moz-transform-origin: -25% 100%;
	margin: 0;
	padding: 0;
	position: relative;
	background-color: transparent;
	z-index: 9 !important;
}

Was noch fehlt ist der JQuery Code. Auch das ist mit wenigen Zeilen erledigt.

Um Konflikte mit dem Code der Webseiten welche wir in die IFrames laden zu vermeiden ist es wichtig JQuery einen Namespace zuzuweisen.
Das machen wir mit "var mwh = {};"

Dann rufen wir JQuery.noConflict auf: "mwh.query = jQuery.noConflict( true );"

Nun wird JQuery nicht mehr über das $- Zeichen angesprochen sondern mit "mwh.query".
Dem Rahmen (also das Hintergrundbild) des jeweiligen Gerätes weisen wir nun die "click" Funktion über seine "id" zu.
Dann ändern wir einfach die Klasse des zugehörigen IFrame.
Mit "toggleClass" weisen wir mit dem ersten Klick unsere neue Klasse zu und der zweite Klick stellt die original Klasse wieder her.
Fertig ist die kleine Animation.

var mwh = {};
mwh.query = jQuery.noConflict( true );

mwh.query(document).ready(function () {
	mwh.query('#idmobile').click(function () {
		mwh.query('.mobile').toggleClass( 'mtrans' );
	});
});