通過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查看的網站上的自適應設計

回答

相關問題