Responsive website design viewed through iframe

Question

I am working on an application that will be deployed to Facebook, so it is being viewed from an iframe inside Facebook chrome.

I have some basic media queries that linearize content in a set viewport size.

When a site is viewed locally in a browser, media queries work fine, but when tested inside Facebook they don’t work chrome.

I assume that resizing the viewport was not detected by the iframe child, so media queries will not have any effect. Is there any way to make this work?

Answer 1

You can add a bit of jQuery to detect window resizing, and then change 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

Since my adapted code used media queries in a common CSS file, I prefer to switch the fbIframe class to the body element and add certain CSS rules in the context of this class. Thus, jQuery code is simplified:

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