通过 iframe 查看的网站如何实现响应式设计

Question

我正在开发一款应用程序，将部署到Facebook上，在Facebook的chrome浏览器内以iframe形式查看。

我有一些基本的媒体查询，可以在设定的视口大小下线性化内容。

当在本地浏览器中查看网站时，媒体查询正常工作，但在Facebook的chrome中测试时，则无法正常工作。

我认为，iframe的子元素没有检测到视口的调整，因此媒体查询将没有效果。有没有办法让它正常工作？

- RyanP13

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

});

- Fisch

Answer 2

由于我已经在一个通用的CSS文件中使用了媒体查询，因此我更喜欢在元素上切换fbIframe类，并在该类的上下文中添加特定的CSS规则。因此，jQuery代码变得更加简单：

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

- Adrien Joly