CSS browser-size selection mit JavaScript

Ich habe nach einer Lösung gesucht, das Design einer Webseite abhängig von der Größe des Browserfensters zu gestalten. Das Design sollte bei kleinen Browserfenstern nicht abgeschnitten aussehen und der Inhalt — meist Bilder — jeweils skaliert werden.

Zur Lösung des Problems gibt es leider keine Conditional Comments, oder CSS Selektoren aber einen einfachen Trick mit JavaScript. Mittels $(window).width() kann man nämlich die Fenstergröße abfragen und daraufhin das CSS passend bspw. mit $("#wrapper").css("width", "820px"); manipulieren.

Also einfach im <head> ein Skript bspw. wie folgt hinzufügen, und fertig:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  if($(window).width() < 1024) 
  { 
    $("#wrapper").css("width", "820px");
    $("div#content").css("width", "600px");
    $("div#content img").css("max-width", "575px");	
  }
  elseif ($(window).width() < 800)
  {
    $("#wrapper").css("width", "520px");
    $("div#content").css("width", "300px");
    $("div#content img").css("max-width", "275px");    
  }
});
</script>



Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.