Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

[Shorty1968]

Hallo ich möchte mittels Javascript die Browser Fenster Grösse des Users auf meiner Seite auslesen und dann eine entsprechende css Datei laden lassen.

Mein Alternativ versuch schlug leider fehl,da wollte ich mit diesem Javascript Code:

<script type="text/javascript">
var gespeichert = "nichts gespeichert";
if (document.cookie) {
  gespeichert = document.cookie;
} else {
document.cookie = "<link rel="stylesheet" type="text/css" href="ban2.css">" + document.lastModified;
}
alert(document.lastModified + " - " + gespeichert);

var gespeichert = "nichts gespeichert";
if (document.cookie) {
  gespeichert = document.cookie;
} else {
document.cookie = "<link rel="stylesheet" type="text/css" href="ban2.css">" + document.lastModified;
}
alert(document.lastModified + " - " + gespeichert);

if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="ban2.css">');
alert("Wenn sie auf OK Klicken wird die Seite in 1024 x 768 geladen!");
}

else if (screen.width == 1280) {
document.write('<link rel="stylesheet" type="text/css" href="ban3.css">');
alert("Wenn sie auf OK Klicken wird die Seite in 1280 x 1024 geladen!");
}
</script>

Die Monitor auflösung auslesen lassen und die entsprechende css Datei laden,aber leider Funktioniert der Code so nicht,alternativ kann mir auch jemand sagen was an meinem Falsch ist.

Ich bin von der Bilschirm Auflösung abgegangen,weil ich über Google gelesen habe es würde nichts bringen,Browser Fenster ermitteln wäre besser,es geht darum auf meiner Seite das Header Logo in verschiedenen Auflösungen an zu zeigen.

Ich bin leider kein programmiere und habe nur was das angeht beschränktes wissen und hoffe das man mir hier helfen kann.

Gruß

 

[randacek_pro]

AW: Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

Hallo,

so kann man das vom Prinzip her natürlich angehen und vor ein paar Jahren hat man das auch so ähnlich gemacht - heute würde ich dir aber eine andere Herangehensweise empfehlen.
Du erstellst nicht mehr für jede Viewportgröße (Viewport = der Bereich, der im Browserfenster jeweils sichtbar ist) eine CSS-Datei, sondern machst ein CSS-Layout, das sozusagen auf allen passt.
Ich kenne deine Seite im Ganzen nicht. Daher nur mal ein paar Gedanken.
Du rufst bei der Größenberechnung ja sowieso nur den Bildschirm ab, der auch dem Browser zur Anzeige des Webinhalts zur Verfügung steht.
Heißt: du ermittelst nicht die tatsächliche Bildschirmgröße (Auflösung) des Gerätes, sondern die Fläche des Inhalts im Browserfenster.
Du verwendest nun als Operator das "=", das doppelt, was bedeutet, dass du jeweils eine CSS-Variante für exakt 1024 oder exakt 1280 Pixel geladen wird.
Nur gibt es heute schon Bildschirme, die 2560 Pixel breit sein können.
Auch hast du (nach dem alert-text) deine Layouts dann auf 1024 x 768 oder 1280 x 1024 ausgelegt, was einem Verhältnis von 4:3, bzw. 5:4 entspricht. Doch bedenke auch die Breitbild-Displays.
Im Grunde schränkst du dich mit diesen Vorgaben eher unnötig ein...

Daher schau dir mal folgende Begriffe näher an: Responsive Design, Floating Layout und Media Queries.
Das ist momentan sozusagen total in und auch sehr nützlich im Webdesign.
Beim Responsive Design geht es im Prinzip genau um das Problem, was du hast: wie passe ich meine Inhalte an verschiedene Display-Auflösungen (Größen) an, so dass mein Layout, mein Design, dabei intakt bleibt und funktioniert.
Dazu nutzt man Floating Layouts ("fließende Gestaltungsaufbauten") und Media Queries.
Bei den Floating Layouts geht es darum, dass sich die Gestaltung wie flüssig dem Platz im Browser anpassen kann; bei den Media Queries handelt es sich um eine Technik, spezielle Angaben auch nur für spezielle Ausgabemedien, Geräte oder Bildschirmformate zu machen.

Schau dich dazu doch mal hier um:

Und zum Einlesen: http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/
und auch noch http://www.konversionskraft.de/trends/die-3-saeulen-des-responsive-webdesign.html

Mehr wird in der umfangreichen Linksammlung erklärt.

Lieber Gruß

 

[Shorty1968]

AW: Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

Hallo und vielen dank,ich werde mir das mal durch lesen und versuchen..
Eigentlich geht es bei meiner seite nur darum das sich das Header Logo nicht den Auflösungen anpasst,wenn ich dafür schon eine Lösung hätte würde mir das reichen.

*EDIT*
Ich kenne mich so schon nicht mit dem Programmieren richtig aus,wie soll ich den nun mit dem neuen klar kommen und das in meine Seite rein bringe.
Ich habe es mir gerade mal angeschaut.

 

[Shorty1968]

AW: Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

Hallo ich habe nun mal versucht mich damit ausseinander zu setzen und bin mir nicht sicher das ich das verstanden habe,ich habe das so verstanden das wenn ich z.b. das:

<link rel="stylesheet" type="text/css" media="(max-device-width: 1024x768)" href="{T_THEME_PATH}/ban2.css" />

in meine html Datei Packe das dann die ban2.css ausgegeben wird,wenn ein user mit einer Bildschirm auflösung von 1024x768 auf meine seite surft richtig?

 

[lachender_engel]

AW: Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

<link rel="stylesheet" type="text/css" media="(max-device-width: 1024x768)" href="{T_THEME_PATH}/ban2.css" />

Also, witdth bedeutet Breite. Daher kannst Du hier nur einen Wert angeben.
max-device-width definiert eine Breite bis zu. Das heißt, dieses CSS greift auch bei einer Breite von 100Pixeln.
min-device-width legt dagegen eine Mindestbreite fest.

 

[Shorty1968]

AW: Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

Ah ok vielen dank das versuche ich mal.

 

[lachender_engel]

AW: Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

Ich kann Dir noch das Tutorial zu Respnsove Webdesign von Pascal ans Herz legen

Dort erklärt er wie Du CSS abhängig von der Browsergröße definierst. Tolle Sache. Wenn Du genug Punkte hast, empfehle ich alle vier Teile dieser Serie.

 

[Shorty1968]

AW: Browser Fenster Grösse ermitteln dann CSS Dateien aufrufen?

Vielen dank.