Hinweis bei Browserauflösung

[molily]

ich suche eine möglichkeit der ausgabe eines hinweises bei zu geringer auflösung des browserfensters, den richtigen lösungsansatz hab ich schon gefunden, ich vermute, dass

Das SELFHTML-Beispiel definiert zwei Methoden, Fensterweite und Fensterhoehe. Diese liefern die Viewportgröße in der jeweiligen Dimension. Du kannst diese beim resize-Event auslesen und prüfen, ob sie einen gewissen Wert unterschreitet.

Das Beispiel überwacht ebenfalls den resize-Wert und registriert dafür einen Event-Handler:

window.onresize = neuAufbau;

Die Handlerfunktion:

function neuAufbau () {  
  if (Weite != Fensterweite() || Hoehe != Fensterhoehe())  
    location.href = location.href;  
}

Diesen Aufbau kannst du so übernehmen, also eine Funktion als resize-Handler registrieren. In dieser Funktion kannst du dann Fensterweite und Fensterhoehe aufrufen und sie mit deinen Mindestwerten vergleichen. Sind sie geringer, so kannst du beispielsweise ein vorher verstecktes Element einblenden, welches einen Hinweis enthält:

window.onresize = testeViewport;  
function testeViewport () {  
  // Zeige oder verstecke den Hinweis, wenn der Viewport kleiner als 500x500 wird  
  document.getElementById('hinweis').style.display =  
    (Fensterweite() < 500 || Fensterhoehe() < 500) ?  
    'block' :  
    'none';  
}

Etwas einfacher geht es ganz ohne JavaScript über CSS-Media-Queries:

#hinweis { display: none; }  
@media (max-width: 500px), (max-height: 500px) {  
  #hinweis { display: block; }  
}

Das macht im Grunde dasselbe wie die JavaScript-Lösung, allerdings funktioniert das nur in neueren Browsern, während das JavaScript-Beispiel aus SELFHTML auch in den vorsintflutlichen IE 4 und Netscape 4 funktioniert. ;)

Mathias