Automatische Weiterleitung anhand der Bildschirmauflösung

M

MistaR

Grünschnabel
Hallo,

ich arbeite derzeit an einem Webseitenprojekt und nun stellt sich mir folgendes Problem:

Da inzwischen immer noch mit unterschiedlichsten Bildschirmauflösungen im Internet gearbeitet wird, muss ich selbstverständlich auch mein Projekt dementsprechend anpassen.

Inzwischen habe ich hierfür auch eine äußerst akzeptable Lösung gefunden. Mein Layout habe ich in zwei verschiedenen Versionen angefertigt (horizontal jeweils prozentual ausgerichtet). Die eine für Auflösungen von 800x600 - 1024x768. Die andere für Auflösungen über 1024x768 - 1600x1200.
Damit die entsprechend größeren Versionen der jeweiligen Layouts nicht nach rechts hin verloren wirken, möchte ich die Seiten ohne Symbolleisten u.Ä. anzeigen.
Sprich: Ich möchte eine Startseite, auf der man nur auf EIN Logo klickt und man so weitergeleitet wird, dass zum einen die Auflösung erkannt und folglich das entsprechende Layout und als nächstes ein neues Fenster in der gewünschten Größe geöffnet, in dem die Seite dargestellt wird.
Außerdem sollte die Startseite nach dem klick auf das Logo zusätzlich geschlossen werden.

Für den Link und die dementsprechende größe des neuen Fensters habe ich schon einen entsprechenden Quellcode gefunden und damit etwas gearbeitet:

Code: 
<html>
 
<head><title>Test</title>
<script type="text/javascript">
 
<!--
 
function NeuFenster() {
MeinFenster =

window.open("index.htm", "Junit", "width=780,height=560");

MeinFenster.focus();



}
}

function NeuFenster1() {

MeinFenster =

window.open("index.htm", "Junit", "width=920,height=680");

MeinFenster.focus();



}

//-->

</script>

</head>
 
<body>
 
<a href="javascript:NeuFenster()">Neues Fenster</a>
<a href="javascript:NeuFenster1()">Neues Fenster1</a>
</body></html>

(Nur einmal als Beispiel und damit ersichtlich wird, wie in etwa ich es haben will. Die Auflösungen sind zunächst für 800x600 und 1024x768 gewählt. Die Alternativseite für größere Auflösungen ist zudem noch nicht in diesen Code eingebunden.)

Wäre diese Vorstellung denn

1.) umsetzbar?

und

2.) wenn ja, wäre jemand so freundlich, um mir dabei etwas weiterzuhelfen

oder

3.) gäbe es vielleicht eine noch viel einfachere Methode (außer entsprechende Grafiken für die jew. Auflösungen auf der Startseite zu platzieren)?


Ich danke euch schonmal vielmals im Voraus!


Grüße
 
Du brauchst schonmal gar kein neues Fenster öffnen, da du den Befehl window.location.href="URL/beispiel.html" verwenden kannst um neue, für die jeweilige Auflösung optimierte Dokument zu laden.

In screen.heigt bzw. screen.width ist die vertikale bzw. horizontale Auflösung, die vom Anwender gefahren wird gespeichert.

Mit window.resizeTo(Breite,Höhe) kannst du das Fenster auf die richtige größe bringen.

Schreib einfach die entsprechnden if-Anweisungen, so ersparst du dem User den klick und die Startseite...

Ich denke mal den Rest packst du selber, ansonstens kannst ja nochmal posten.
 
Danke schonmal für deine Antwort.

In etwa ist mir jetzt auch klar, wie das von statten gehen soll, NUR:

Ich hab' von Javascript eigentlich nicht den blassesten Schimmer und habe mir das auch nur so halbwegs via http://de.selfhtml.org zusammengebastelt.
Mit "if else" Bedingungen kann ich bisher noch nicht so ganz umgehen.

Je nachdem wie lang und ausführlich das denn wäre. Könntest du mir evtl. schnell (?) einen Code reinstellen, der so aussieht, dass man, sobald man auf den eigentlichen Link geht, dementsprechend zu einer Ausgabeseite weitergeleitet wird, die einer Auflösung von 800x600-1024x768 Pixeln entspricht? Also so in etwa, wie du es meintest?

Wenn das nicht allzuviel sein sollte, könntest du mir dann evtl. mal was reinstellen? Wenn es aber länger als 3-4 Minuten dauert, dann lass es bleiben, dann schaue ich, dass ichs irgendwie selbst hinbekomme ...


Grüße
 
HTML: 
<html><head><title>Weiterleitung</title>
 			
 	<script language="JavaScript">
 		
 		var URL_large="http://www.deinSeite.de/großeAuflösungen.html";
 		var URL_small="http://www.deinSeite.de/kleineAuflösungen.html";
 		
 		var height = screen.availHeight, width = screen.availWidth;
 		
 		window.onload=forward;
 		
 		function forward() {
 			if ( height <= 768 ) window.location.href=URL_small;
 			else window.location.href=URL_large;
 			window.moveTo(0,0);
 			window.resizeTo(width,height);
 		}//end forward
 		
 	</script>
 
 </head><body>Sie werden gleich Weitergeleitet</body></html>
Hier musst du nur noch neben URL_large und URL_small die jeweils richtige URL in die Anführungszeichen "" schreiben.
Ich hab jetzt mal den Schnickschnack mit der Startseite und dem Link, wo man zuerst draufklicken müsste weggelassen, weil es besser ist, wenn die Leute gleich auf deine Stei kommen, aber wenn du das unbedingt drinhaben willst, dann lösch einfach das "window.onload=forward" und benutzte diesen Link:
HTML: 
<a href="javascript:forward()">Weiter</a>
 
Danke dir schonmal für deine Mühe! Ist nicht selbstverständlich, daher weiß ich das zu schätzen.

Aber eigentlich hatte ich es halt eben etwas anders gemeint:
Dein Code zielt darauf ab, bei einer bestimmten Auflösung das entsprechend hierfür gewählte Layout anzuzeigen.
Ich habe hingegen nur zwei Layouts entworfen, eins für bis zu 1024x768, das andere für bis zu 1600x1200.
Insoweit würde das vno dir ja noch passen, aber die Designs funktionieren auch nur unter den jeweiligen Einstellungen, weil die Zielfenstergröße fest an die jeweiligen - in dem Auflösungsbereich befindlichen - spezifischen Auflösungen angepasst sind.

Kurz: Bei einer Auflösung von 800x600 sollte sich ein anderes Fenster als bei 1024x768 öffnen, auch wenn ich für beide das selbe Layout nutze.

Am einfachsten wird es wohl durch eine Beispielangabe erkennbar:

http://fifa.webchiller.com/Arbeit/Junit3/startseite.htm (für 1024x768)

http://fifa.webchiller.com/Arbeit/Junit3/startseite1.htm (für 800x600)


Wie du siehst, möchte ich eine Weiterleitung einbauen, die zum einen Unterscheidet, bei welcher Auflösung zu welchem Link weitergeleitet und zudem in welcher Größe das Ausgabefenster - entsprechend der Auflösung - angezeigt werden soll ...

Ist sowas denn umsetzbar?

Danke nochmal!


Grüße
 
Gleiches Spielchen:
HTML: 
<script language="JavaScript"><!--
  
  	//Settings
 	var URL_large=	 "großeAuflösungen.html";	//URL -large Resolutions
 	var height_large= 790; 		 		//Height -large resolutions
 	var width_large= 900; 		 		//Width -large resolutions
  
 	var URL_small=	 "kleineAuflösungen.html";	//URL - small Resolutions
 	var height_small= 600; 		 		//Height - small resolutions
 	var width_small= 600; 		 		//Width - small resolutions
  
  	//Code
  	window.onload=forward
  	function forward() {
  		if ( screen.height > 768 ) {
  			window.resizeTo(width_large,height_large);
  			window.location.href=URL_large;
  		}
  		else {
  			window.resizeTo(width_small,height_small);
  			window.location.href=URL_small;
  		}
  	}//end forward
  
  //--></script>
Mit window.open() bzw. window.close() würde ich deswegen nicht arbeiten, weil seit den Service-Pack 2 der IE fragt, ob man das Fenster wirklich schließen will, was den User ziemlich nervt.
 
Zuletzt bearbeitet:
Ich bin leider zuletzt nicht dazugekommen, hier reinzusehen und hab' es erst jetzt nachholen können.

Riesigen Dank für deine Hilfe schon jetzt! Kanns zwar im Moment noch nicht testen, da ich hier nicht von meinem Arbeitsplatz aus schreibe, aber werde das womöglich heute Nachmittag noch machen und bescheid geben, ob es hinhaut - denke aber mal schon :)

Nochmals viiiielen viielen Dank, du hast mir echt enorm weitergeholfen!


Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück