Responsive design on site that is viewed via an iframe

Question

I am working on an app that will be deployed to Facebook therefore viewed from an iframe inside of Facebook's chrome.

I have some basic media queries that linearise the content at a set viewport size.

When the site is viewed in the browser locally the media queries work fine but when tested inside Facebook's chrome then they do not work.

I assume that the resizing of the viewport is not detected by the child of the iframe therefore the media queries will have no effect. Is there a way to get this working?

Answer 1

You could add a little jQuery to detect a window resize and then swap out a separate stylesheet.

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

As my adapted code was using media queries in a common CSS file, I prefer to toggle a fbIframe class on the body element, and add specific CSS rules in context of this class. The jQuery code thus becomes simpler:

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