iframeを介して表示されるサイト上の反応的なデザイン

Question

FacebookのChromeのiframeから表示されるFacebookに展開されるアプリケーションに取り組んでいます。

設定されたビューポートサイズでコンテンツを線形化する基本的なメディアクエリがあります。

サイトをブラウザでローカルに表示すると、メディアクエリはうまく動作しますが、Facebookのクロムでテストしたところ、動作しません。

私は、ビューポートのサイズ変更が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" />'); 
     } 
    });  

}); 

Answer 2

私の適応コードが共通のCSSファイル内のメディアクエリを使用していたとして、私はbody要素にfbIframeクラスを切り替えて、このクラスのコンテキストで特定のCSSルールを追加することを好みます。したがって、jQueryコードはよりシンプルになります。

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