Ändern Sie Javascript nach Fensterbreite

Question

Ich denke, das ist ganz einfach, aber nach 2 Tagen des Versuchs bin ich immer noch ahnungslos. Grundsätzlich muss ich eine Reihe von Befehlen ausführen, wenn der Bildschirm über 767 Pixel breit ist und eine andere, wenn der Bildschirm unter 767 Pixel ist.

Wenn der Bildschirm breiter als 767 Pixel, ich will:

<script type="text/javascript"> 

    var jsReady = false;//for flash/js communication 

    // FLASH EMBED PART 
    var flashvars = {}; 
    var params = {}; 

    params.quality = "high"; 
    params.scale = "noscale"; 
    params.salign = "tl"; 
    params.wmode = "transparent"; 
    params.bgcolor = "#111111";//change flash bg color here 
    params.devicefont = "false"; 
    params.allowfullscreen = "true"; 
    params.allowscriptaccess = "always"; 
    var attributes = {}; 
    attributes.id = "flashPreview"; 

    swfobject.embedSWF("preview.swf", "flashPreview", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes); 

    <!-- and much more code... --> 

</script> 

Wenn der Bildschirm schmaler als 768 Pixel, ich will laufen:

<script type="text/javascript"> 

     jQuery(function($){ 
      $.supersized({ 
       //Background image 
       slides : [ { image : 'img/some_image.jpg' } ]     
      }); 
     }); 

</script> 

Das ist richtig ... Für Desktops und Tablets möchte ich einen Videohintergrund im Vollbildmodus anzeigen. Für kleinere Bildschirme (weniger als 767 Pixel) möchte ich einen einzelnen Standbildhintergrund anzeigen.

Answer 1

Sie können die aktuelle Größe von Fenstern mit $(window).width() abrufen und einen Handler an das Ereignis resize des Formulars anhängen. Für eine einfache Verwendung ist es so einfach wie

$(window).resize(funcion() { 
    $width = $(window).width(); 
    if($width < 767) { 
      $.supersized({ 
       //Background image 
       slides : [ { image : 'img/some_image.jpg' } ]     
      }); 
    } else { 
     //if width is greater than 767 
    } 
}); 

Answer 2

if(screen.width > 767) { 
    code A... 
} else { 
    code B... 
} 

Answer 3

Da Sie JQuery verwenden können Sie verwenden:

if ($(window).width > 767) { ... } 

, dass die aktuelle Größe des Fensters zurück, nicht der max.