Hier habe ich mal ein Startscreen in CSS und jQuery erstellt. Dies kann man zb. als vollflächigen Startscreen für mobile Apps verwenden. Ziel ist es, eine Intro Grafik für eine HTML Anwendung, zentriert in angepasster Höhe und Breite des Displays auszugeben und nach einigen Sekunden auszublenden.

Ich gehe von einer Mindestbreite von 320 Pixel aus (entspricht der Breite im Portrait Modus beim iPhone 5) Im CSS (#startscreen-image) gebe ich die Vektorgrafik Grafik, hier ein base64 komprimiertes SVG, mit einem Abstand nach alles Seiten zu 20px aus.

Die Grafik selbst ist in einer Ebene (#startscreen) eingbunden, die den Bildschirm komplett ausfüllt. Hier die wenigen Zeilen CSS:

#startscreen {
	height:100%;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:1000;
	background-color:black;
	display: flex;
	align-items: center; /* vertical align: */
	justify-content: center; /* horizontal align: */
}
#startscreen-image {
	width: 280px; /* + 40px distance = iphone5 320px width */
	height: 280px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvb......1LDEwOC42LDI1NS40LDEwOC43eiIvPjwvZz48L2c+PC9zdmc+);
}

Das HTML besteht nur aus zwei DIVs:

<div id="startscreen">
  <div id="startscreen-image"></div>
</div>

Und nun zum JavaScript. Die Funktion wird mit load und resize gestartet. Sprich beim Laden und bei Veränderung der Screens ausgeführt, wenn man das Display in den Landscape Modus kippt.

Nun schreibe ich die aktuelle Screen Weite und Höhe in die Variablen – minus 40 Pixel – also 20px auf jeder Seite.

Jetzt folgt eine Anweisung: Sollte die Weite größer als die Höhe sein (Landscape), nimm die Höhe als Maximalwert her. Also auch für die Weite. Beim Portrait Modus ist das dann umgekehrt.

Als letztes folgt das ausblenden (fadeOut slow) mit einer Verzögerung (delay = 1800). Da ich für den Startscreen keine Verwendung mehr habe, lösch ich das DIV mit „remove“.

<script>
$(window).on("load resize",function(e){
  var imgheight = $(window).height() - 40;
  var imgwidth = $(window).width() - 40;
 
if($(window).width() >= $(window).height()) {
  $('#startscreen-image').css('height', imgheight);
  $('#startscreen-image').css('width', imgheight);
  } else {
  $('#startscreen-image').css('width', imgwidth);
  $('#startscreen-image').css('height', imgwidth);
}
 
  $("#startscreen").delay(1800).fadeOut("slow", function() { $(this).remove(); });
});
</script>

Demo ansehen

jQuery Startscreen Demo

Das Script könnte man natürlich auch verwenden, um zB. Canvas Games mit gleichen Proportionen oder Größe laufen zu lassen.