Отзывчивый дизайн на сайте, который просматривается с помощью iframe

Question

Я работаю над приложением, которое будет развернуто в Facebook, поэтому просматривается с iframe внутри хром Facebook.

У меня есть некоторые базовые медиа-запросы, которые линеаризуют контент в установленном размере видового экрана.

Когда сайт просматривается в браузере локально, медиа-запросы работают нормально, но при тестировании внутри хрома Facebook они не работают.

Я предполагаю, что изменение размера окна просмотра не обнаружено дочерним элементом iframe, поэтому медиа-запросы не будут иметь никакого эффекта. Есть ли способ заставить это работать?

Answer 1

Вы можете добавить немного jQuery, чтобы обнаружить изменение размера окна, а затем поменять отдельную таблицу стилей.

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

Как мой адаптированный код использует медиа запросов в общем файле CSS, я предпочитаю, чтобы переключить fbIframe класс на body элемент, и добавить определенные правила CSS в контексте данного класса. Таким образом, код jQuery упрощается:

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