पूर्ण पृष्ठ <iframe>

मेरे पास नीचे उदाहरण कोड है। यह मोबाइल उपकरणों पर ब्राउज़रों को छोड़कर सभी ब्राउज़रों के साथ ठीक काम करता है।पूर्ण पृष्ठ <iframe>

अतिप्रवाह टैग समस्या है। सभी मोबाइल और कंप्यूटर के साथ नहीं

margin: 0; padding: 0; height: 100%; overflow: hidden;

काम करता है:: मोबाइल को छोड़कर सभी के साथ

वर्क्स

margin: 0; padding: 0; height: 100%;

सबसे अच्छा तरीका यह दोनों पर काम करने के लिए क्या है?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
      <iframe width="100%" height="100%" src="http://www.cnn.com" /> 
    </body> 
</html>

स्रोत

2013-07-17 Lacer

क्यों न केवल 'cnn.com' पर रीडायरेक्ट करें? – GolezTrol

cnn.com एक उदाहरण है। उस व्यवहार को दिखाने के लिए जिसे मैं रोकने की कोशिश कर रहा हूं। – Lacer

बस '<मेटा नाम =" व्यूपोर्ट "सामग्री =" चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1, अधिकतम-स्केल = 1 ">' युक्त एचटीएमएल और प्रतिक्रिया के सिर पर वापस दोबारा जोड़ें कम से कम आंशिक रूप से)। – Nukey

106

यहाँ काम कर कोड है जोड़ें। डेस्कटॉप और मोबाइल ब्राउज़र में काम करता है। आशा करता हूँ की ये काम करेगा। हर किसी के जवाब के लिए धन्यवाद।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Layout</title> 
     <style type="text/css"> 
      body, html 
      { 
       margin: 0; padding: 0; height: 100%; overflow: hidden; 
      } 

      #content 
      { 
       position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" /> 
     </div> 
    </body> 
</html>

स्रोत

2013-07-18 04:14:00 Lacer

देखें, जब मैं ऊपर एक आईफ्रेम रखना चाहता था - क्रोम में कोई समस्या थी। मैंने को बंद किया और –

काम करता है ऐसा लगता है कि यह iframe के भीतर सामग्री से _responsiveness_ (यानी स्तंभों का ढहना आदि) ले रहा है। लेकिन किसी भी तरह से केवल मोबाइल सफारी के साथ पृष्ठ खोलते समय, डेस्कटॉप ब्राउज़र का आकार बदलने पर नहीं। कोई विचार क्या उस व्यवहार का कारण बन सकता है? – psteinweber

@psteinweber, आपको बस '<मेटा सामग्री =' चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1.0 'नाम =' व्यूपोर्ट '>' युक्त पृष्ठ पर जोड़ने की आवश्यकता है। – jfeust

यही वह है जो मैंने पहले किया था।

html, body { 
    height: 100%; 
    overflow: auto; 
}

इसके अलावा iframe में निम्नलिखित शैली

border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%

स्रोत

2013-07-17 21:31:38

उत्तर के लिए धन्यवाद लेकिन यह अनिवार्य रूप से मेरे पास है इसलिए यह काम नहीं करता है। मोबाइल ब्राउज़र पर यह किसी भी चीज को ओवरफ्लो में कटौती करता है और आपको स्क्रॉल नहीं करने देता है। – Lacer

@Lacer 'ओवरफ़्लो: छुपा हुआ 'को ओवरफ़्लो के साथ बदलने का प्रयास करें: ऑटो' –

ने कोशिश की। मोबाइल ब्राउज़र पर यह अभी भी इसे बंद कर देता है और डेस्कटॉप ब्राउज़र पर इसे डबल स्क्रॉल का कारण बनता है – Lacer

यह क्रॉस-ब्राउज़र समर्थित है और पूरी तरह उत्तरदायी है।

<iframe src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview" style="position:fixed; top:0px; bottom:0px; right:0px; width: 100%; border: none; margin:0; padding:0; overflow: hidden; z-index:999999; height: 100%;">

स्रोत

2017-04-13 15:17:34

अपने सीएसएस में इस रखो।

iframe{ 
width:100%; 
height:100vh; 
}

स्रोत

2018-03-08 19:19:02

पूर्ण पृष्ठ <iframe>

उत्तर

संबंधित मुद्दे