iframe을 통해 본 사이트에서 반응이 좋은 디자인

Question

Facebook에 배치되어 Facebook 크롬의 iframe에서 볼 수있는 앱을 개발 중입니다.

세트 뷰포트 크기로 내용을 선형화하는 기본 미디어 쿼리가 있습니다.

사이트를 브라우저에서 로컬로 볼 때 미디어 쿼리가 제대로 작동하지만 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);