Progettazione reattiva sul sito che viene visualizzata tramite un iframe

Question

Sto lavorando a un'app che verrà distribuita su Facebook, quindi visualizzata da un iframe all'interno del chrome di Facebook.

Ho alcune query di supporto di base che linearizzano il contenuto in una dimensione di visualizzazione della vista.

Quando il sito viene visualizzato nel browser in locale, le query multimediali funzionano correttamente, ma se testate all'interno di Chrome di Facebook, non funzionano.

Suppongo che il ridimensionamento della finestra non venga rilevato dal figlio dell'iframe, pertanto le query multimediali non avranno alcun effetto. C'è un modo per farlo funzionare?

Answer 1

È possibile aggiungere un po 'di jQuery per rilevare un ridimensionamento della finestra e quindi scambiare un foglio di stile separato.

$(window).resize(function(){ 

    var currentWidth = $(document).width(); 
    var allStyleSheets = $("link"); 
    allStyleSheets.each(function(){ 
     var $this = $(this); 

     //assume sheet1.css is for pages with widths equal and over 700 and sheet 2 is for widths under 700px 
     if(currentWidth >= 700 && $this.attr("href").indexOf("sheet2.css") > 0){ 
      $this.remove(); 
      $(head).append('<link href="sheet1.css" type="text/css" rel="stylesheet" />'); 
     } 
     if(currentWidth < 700 && $this.attr("href").indexOf("sheet1.css") > 0){ 
      $this.remove(); 
      $(head).append('<link href="sheet2.css" type="text/css" rel="stylesheet" />'); 
     } 
    });  

}); 

Answer 2

Come il mio codice adattato stava usando media query in un file CSS comuni, preferisco passare una classe fbIframe sull'elemento body, e aggiungere le regole CSS specifiche nel contesto di questa classe. Il codice jQuery diventa quindi più semplice:

function adaptToWindowSize(){ 
    $("body").toggleClass("fbIframe", $(window).width() < 820); 
}; 
$(window).resize(adaptToWindowSize); 
$(adaptToWindowSize);