通过iframe查看的网站上的自适应设计

我正在研究一个应用程序，该应用程序将部署到Facebook，因此可以从Facebook的镶边内部的iframe中查看。通过iframe查看的网站上的自适应设计

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

当浏览器在本地查看网站时，媒体查询工作正常，但在Facebook的Chrome浏览器中进行测试时，它们不起作用。

我假设调整大小的视口不是由iframe的孩子检测到的，因此媒体查询将不起作用。有没有办法让这个工作？

2012-03-13 RyanP13

您可以添加一个小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" />'); 
     } 
    });  

});

来源

2012-03-18 23:34:02 Fisch

正如我适应代码是用在一个共同的CSS文件媒体查询，我宁愿切换body元件上的fbIframe类，并在这个类的情况下添加特定CSS规则。 jQuery代码因此变得更简单：

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

来源

2012-05-14 13:31:18

通过iframe查看的网站上的自适应设计

回答

相关问题