Thiết kế đáp ứng trên trang web được xem qua iframe

Question

Tôi đang làm việc trên một ứng dụng sẽ được triển khai lên Facebook do đó được xem từ một khung nội tuyến bên trong chrome của Facebook.

Tôi có một số truy vấn phương tiện cơ bản tuyến tính nội dung ở kích thước khung nhìn đã đặt.

Khi trang web được xem trong trình duyệt cục bộ, truy vấn phương tiện hoạt động tốt nhưng khi được kiểm tra bên trong chrome của Facebook thì chúng không hoạt động.

Tôi giả định rằng việc thay đổi kích thước của chế độ xem không được phát hiện bởi con của khung nội tuyến do đó truy vấn phương tiện sẽ không có hiệu lực. Có cách nào để làm việc này không?

Answer 1

Bạn có thể thêm một chút jQuery để phát hiện thay đổi kích thước cửa sổ và sau đó hoán đổi một biểu định kiểu riêng.

$(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

Như đang thích nghi của tôi đã sử dụng các truy vấn phương tiện truyền thông trong một file CSS chung, tôi thích để chuyển qua một lớp fbIframe trên các yếu tố body, và thêm các quy tắc CSS cụ thể trong bối cảnh của lớp này. Mã jQuery do đó trở nên đơn giản hơn:

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