साइट पर उत्तरदायी डिज़ाइन जिसे आईफ्रेम

Question

के माध्यम से देखा जाता है, मैं ऐसे ऐप पर काम कर रहा हूं जो फेसबुक पर तैनात किया जाएगा इसलिए फेसबुक के क्रोम के अंदर आईफ्रेम से देखा गया है।

मेरे पास कुछ बुनियादी मीडिया प्रश्न हैं जो एक सेट व्यूपोर्ट आकार पर सामग्री को रेखांकित करते हैं।

जब साइट स्थानीय रूप से ब्राउज़र में देखी जाती है तो मीडिया प्रश्न ठीक काम करते हैं लेकिन जब फेसबुक के क्रोम के अंदर परीक्षण किया जाता है तो वे काम नहीं करते हैं।

मुझे लगता है कि व्यूपोर्ट का आकार आईफ्रेम के बच्चे द्वारा नहीं पता चला है इसलिए मीडिया प्रश्नों का कोई प्रभाव नहीं पड़ेगा। क्या यह काम करने का कोई तरीका है?

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

जैसा कि मेरे अनुकूलित कोड एक आम सीएसएस फ़ाइल में मीडिया के प्रश्नों का उपयोग कर रहा था, मैं body तत्व पर एक fbIframe वर्ग टॉगल, और इस वर्ग के संदर्भ में विशिष्ट सीएसएस नियम जोड़ने के लिए पसंद करते हैं। इस प्रकार jQuery कोड सरल हो जाता है:

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