Diseño receptivo en el sitio que se ve a través de un iframe

Question

Estoy trabajando en una aplicación que se desplegará en Facebook, por lo tanto, se ve desde un iframe dentro del cromo de Facebook.

Tengo algunas consultas básicas de medios que linealizan el contenido en un tamaño de ventana definido.

Cuando el sitio se ve en el navegador localmente, las consultas de medios funcionan bien, pero cuando se prueban dentro del Facebook Chrome no funcionan.

Supongo que el niño del iframe no detecta el cambio de tamaño de la ventana gráfica, por lo tanto, las consultas multimedia no tendrán ningún efecto. ¿Hay alguna manera de hacer que esto funcione?

Answer 1

Puede agregar un poco de jQuery para detectar el tamaño de una ventana y luego cambiar una hoja de estilo por separado.

$(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

Como mi código adaptado estaba usando preguntas de los medios en un archivo CSS común, prefiero cambiar una clase fbIframe en el elemento body, y añadir reglas CSS específicas en el contexto de esta clase. El código jQuery se vuelve más simple:

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