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

Question

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

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

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

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

Answer 1

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

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

Answer 2

Вы можете добавить небольшой 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" />');
        }
    });    

});