java script Bildschirmauflösung

[syco753]

Hallo,

meine webseite soll auf die bildschirmgrösse(auflösung) reagieren können. Je nach auflösung wird das webseiten logo in einer anderen grösse geladen.

Bildschirmauflösung width = 800   -> lade: logo800.jpg
Bildschirmauflösung width = 1024   -> lade: logo1024.jpg
Bildschirmauflösung width = 1280   -> lade: logo1280.jpg
Bildschirmauflösung width = unbekannt oder nicht gleich oben -> lade logo1024.jpg

Mit folgendem Script hab ich das versucht:

<script type="text/javascript">
if (screen.width == 800)
{
      <img border="0" src="grafik/logo800.jpg" width="771" height="82"></td>
}
if (screen.width == 1024)
{
      <img border="0" src="grafik/logo1024.jpg" width="771" height="82"></td>
}
if (screen.width == 1280)
{
      <img border="0" src="grafik/logo1024.jpg" width="771" height="82"></td>
}
</script>

Nun das funktioniert so hald nicht. Ich selber hab mit Java Script noch nie gearbeitet und mich ausschliesslich mit PHP abgegeben.

Kann jemand einem JS Unerfahrenen erklären wie ich das zu bewerkstelligen habe? Bin bei google nicht schlau geworden.

Danke mal im Voraus

[Mathias Brodala]

Hallo syco753.

meine webseite soll auf die bildschirmgrösse(auflösung) reagieren können.

Da die Auflösung gänzlich unabhängig von der Größe des Viewports (Fensterinnenraumes) ist, solltest du besser die Dimensionen letzteres in dein Script einbeziehen.

Mit folgendem Script hab ich das versucht:

<script type="text/javascript">
if (screen.width == 800)
{
      <img border="0" src="grafik/logo800.jpg" width="771" height="82"></td>
}

Hier sollte wohl eigentlich die Grafik ins Dokument geschrieben werden, nicht? Die Fehlerkonsole eines Browsers hätte dir hier die Fehler gezeigt.

Und was ist mit dem schließenden Tabellentag da?

Kann jemand einem JS Unerfahrenen erklären wie ich das zu bewerkstelligen habe?

Am besten notierst du im Dokument erst einmal fest die kleinstmögliche Fassung deiner Grafik:

<img id="wechselgrafik" src="grafik/logo800.jpg" width="771" height="81" alt="Vergissmeinicht">

(Mit Hilfe der ID kannst du die Grafik später im Dokument verschieben wie es dir beliebt. Alternativ wäre der Zugriff auch einfach per document.http://de.selfhtml.org/javascript/objekte/images.htm@title=images-Knotenliste möglich.)

Nun kannst du beim Laden den Inhalt des src-Attributes dieser Grafik abhängig von z. B. der Breite des body-Elementes anpassen:

window.onload = function() {  
  
  if (document.[ref:self811;javascript/objekte/document.htm#get_element_by_id@title=getElementById]) {  
  
    var img = document.getElementById('wechselgrafik');  
    var bwidth = document.body.[ref:self811;javascript/objekte/all.htm#offset_width@title=offsetWidth];  
  
    if (bwidth > 800) {  
  
      img.[ref:self811;javascript/objekte/htmlelemente.htm#img@title=src] = "grafik/logo1024.jpg";  
  
    } else if (bwidth > 1000) {  
  
      img.src = "grafik/logo1280.jpg";  
    }  
  
  }  
};

Zum besseren Verständnis solltest du den im Code platzierten Links folgen.

Nebenbei: deine Grafik möchte nicht zufällig eigentlich eine Hintergrundgrafik sein, oder?

Einen schönen Montag noch.

Gruß, Mathias

[Der Martin]

Hi,

Bildschirmauflösung width = 800   -> lade: logo800.jpg
Bildschirmauflösung width = 1024   -> lade: logo1024.jpg
Bildschirmauflösung width = 1280   -> lade: logo1280.jpg
Bildschirmauflösung width = unbekannt oder nicht gleich oben -> lade logo1024.jpg

Und was ist mit Zwischenwerten, etwa 960 oder 1152? Okay, 960 ist sehr selten, aber 1152x864 ist durchaus eine Überlegung wert - ich habe das auf einem meiner PCs als Standardauflösung.

Aber viel interessanter: Was zum Geier hat die Bildschirmauflösung mit der Größe des Browserfensters zu tun?

Ciao,
 Martin

[Orlando]

Bildschirmauflösung width = 800   -> lade: logo800.jpg
Bildschirmauflösung width = 1024   -> lade: logo1024.jpg
Bildschirmauflösung width = 1280   -> lade: logo1280.jpg
Bildschirmauflösung width = unbekannt oder nicht gleich oben -> lade logo1024.jpg

Das heißt, ich erhalte trotz verfügbarer 1.920 Pixel weniger als 1.280, nämlich nur 1.024, was dennoch für eine Browserfensterbreite von 900 Pixel zu viel ist. Schlecht. Du interessierst dich eigentlich gar nicht für die Auflösung meines Monitors, sondern für die Innengröße meines Browserfensters, denn mehr Platz steht deiner Site nicht zur Verfügung. Mein Browser läuft nur hier im Forum in voller Pracht, weil ich hier die Textbreite selbst einstellen kann. Auf anderen Seiten ohne Höchstbreite sind 100 und mehr Zeichen pro Zeile nicht unbedingt gut lesbar.

Wie es um derartige Optimierungen bestellt ist, erklärt dir molily im Weblog, das auch eine informative Statistik bietet. Dort findest du auch Verweise auf „fluide“ Layouts, die sich den Gegebenheiten anpassen. Weitere Layout-Sammlungen: float, 2 Spalten, 3 Spalten, volle Höhe, CSS-Galerien allgemein.

Kann jemand einem JS Unerfahrenen erklären wie ich das zu bewerkstelligen habe?

Mit JavaScript kommst du nicht unbedingt gut weiter. Wäre es nicht besser, kein starres, sondern ein flexibles Layout einzusetzen? Machen pixelgenaue Hintergrundbilder es erforderlich, feste Breiten vorzugeben? Besser, du definierst nur eine Maximalbreite, um den Inhalt leserlich zu halten und verlässt dich darauf, dass der Browser den Text korrekt umbricht. Grase also zunächst die angegebenen Verweise ab und versuche, ein dir genehmes Layout nach deinen eigenen Vorstellungen umzugestalten.

Solltest du dennoch ins Verderben laufen wollen, kannst du dir ansehen, wie man die <http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm#quelltext@title=Fensterbreite mit JavaScript> ermittelt.

Roland

[Der Martin]

Hallo Roland,

Das heißt, ich erhalte trotz verfügbarer 1.920 Pixel ...

oh, das ist natürlich hart, wenn man nur knapp zwei Pixel in der Breite zur Verfügung hat ...

*scnr*
 Martin

[Jeena Paradies]

Hallo,

oh, das ist natürlich hart, wenn man nur knapp zwei Pixel in der Breite zur Verfügung hat ...

Wie kommst du jetzt auf zwei? Ich sehe da ein tausend neunhundert und zwanzig.

Grüße
Jeena Paradies

[Mathias Brodala]

Hallo Jeena.

oh, das ist natürlich hart, wenn man nur knapp zwei Pixel in der Breite zur Verfügung hat ...
Wie kommst du jetzt auf zwei? Ich sehe da ein tausend neunhundert und zwanzig.

But not in English.

Einen schönen Montag noch.

Gruß, Mathias

[Orlando]

oh, das ist natürlich hart, wenn man nur knapp zwei Pixel in der Breite zur Verfügung hat ...

Wie kommst du jetzt auf zwei? Ich sehe da ein tausend neunhundert und zwanzig.

But not in English.

Ah, der „Pixel“ wegen? Ok, dann sinds halt knapp zweitausend Punkterl.

Roland

[Der Martin]

Hallo,

Wie kommst du jetzt auf zwei? Ich sehe da ein tausend neunhundert und zwanzig.
But not in English.
Ah, der „Pixel“ wegen? Ok, dann sinds halt knapp zweitausend Punkterl.

nein, des EDV-verwandten Kontextes wegen. Da ist der Punkt nun mal das übliche Dezimalzeichen. Schon im Gymnasium in den 80er Jahren hat man mich und meine Mitschüler ermahnt, nur ja keinen Punkt zur Zifferngruppierung zu setzen, weil das missverständlich sein kann. Wenn es unbedingt sein muss, setzt man ein Leerzeichen, oder -noch besser- man lässt es ganz bleiben.

Schönen Abend noch,
 Martin

[Orlando]

But not in English.
Ah, der „Pixel“ wegen?

nein, des EDV-verwandten Kontextes wegen.

Mein Kontext war irrtümlich die deutsche Sprache. Entschuldigung. ;-)

Wenn es unbedingt sein muss, setzt man ein Leerzeichen, oder -noch besser- man lässt es ganz bleiben.

Nein, 2304000 px² liest sich blöd.

Roland

[Der Martin]

Hi Jeena,

oh, das ist natürlich hart, wenn man nur knapp zwei Pixel in der Breite zur Verfügung hat ...
Wie kommst du jetzt auf zwei? Ich sehe da ein tausend neunhundert und zwanzig.

aha, ich sehe Eins Punkt Neun-Zwei.

Ciao,
 Martin

[Orlando]

Wie kommst du jetzt auf zwei? Ich sehe da ein tausend neunhundert und zwanzig.

aha, ich sehe Eins Punkt Neun-Zwei.

Damit auch dein Betriebssystem die Zahl korrekt darstellt: MCMXX

Roland ;-)

[syco753]

Hallo roland

Ich will nicht das ganze design anpassen, das ist auch mit 800x600 noch gut ersichtlich, jedoch will ich die grösse des logos ändern unabhängig von der jeweiligen Fenstergrösse.

Wenn jemand mit 1280x1024 dahergesurft kommt will ich dem auch schön das Logo präsentieren- nicht zu pompös da er ev nicht im Fullscreen surft aber doch nicht zu klein.

Bei jemandem mit 800x600 will ich das Logo stark verkleinern und gleich mit dem informativen Inhalt kommen.

Alles andere bleibt auf der webseite genau gleich.

Wie ist es also Möglich mit JS die Auflösung zu erruieren und dann ggf. ein alternatives Logo anzuzeigen???

Danke im Voraus.

[Mathias Brodala]

Hallo syco753.

Wie ist es also Möglich mit JS die Auflösung zu erruieren und dann ggf. ein alternatives Logo anzuzeigen???

Diese Frage wurde mittlerweile bereits mehrfach beantwortet.

Einen schönen Dienstag noch.

Gruß, Mathias

[Orlando]

Ich will nicht das ganze design anpassen, das ist auch mit 800x600 noch gut ersichtlich, jedoch will ich die grösse des logos ändern unabhängig von der jeweiligen Fenstergrösse.

Passt es dann auch immer recht ins Bild? Die Fenstergröße hat nicht unbedingt etwas mit der Auflösung zu tun.

Wenn jemand mit 1280x1024 dahergesurft kommt will ich dem auch schön das Logo präsentieren- nicht zu pompös da er ev nicht im Fullscreen surft aber doch nicht zu klein.

Der http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm#quelltext@title=Verweis sollte dir folgenden Teil des Scripts näherbringen (etwas umgebaut):

  
  if (window.innerWidth) {                                  // kennt der Browser window.innerWidth?  
    alert(window.innerWidth);                               // falls ja, melde die Breite  
  } else if (document.body && document.body.offsetWidth) {  // kennt …  
    alert(document.body.offsetWidth);                       // … wie oben  
  } else {                                                  // tja, andernfalls  
    alert("Die Fensterbreite ist nicht zu ermitteln");      // Pech gehabt  
  }  

Für diesen Anwendungszweck würde ich übrigens kein gesondertes Stylesheet einsetzen, sondern die Quelle des Bildes tauschen (beispielsweise logo-klein.png durch logo-mittel.png ersetzen). In etwa so:

[ref:self811;javascript/objekte/document.htm#get_element_by_id@title=document.getElementById]("logo").src = "dateiname.xyz";

Dafür benötigt das Bild eine ID namens „logo“. Vermutlich sind das width- und das height-Attribut des Bildes dann http://de.selfhtml.org/javascript/objekte/all.htm#set_attribute@title=anzupassen, keine Ahnung.

Roland