通过iframe查看的网站上的响应式设计

Question

我正在开发一个将部署到Facebook的应用程序,因此可以从Facebook的chrome内部的iframe查看.

我有一些基本的媒体查询,以设置的视口大小线性化内容.

当在本地浏览器中查看该站点时,媒体查询工作正常,但在Facebook的chrome中进行测试时,它们无法正常工作.

我假设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" />');
        }
    });    

});