आईओएस पर सीएसएस के साथ आईफ्रेम आकार

Question

एक आईफ्रेम है, जो मूल रूप से फ्रेम में फ़िट होने से अधिक सामग्री है। फ्रेम का आकार ब्राउज़र स्क्रीन आकार पर आधारित है और ओवरफ़्लो स्क्रॉल देता है, जो आईओएस को छोड़कर, सभी ब्राउज़रों पर पूरी तरह से काम करता है। आईओएस पर, सफारी सामग्री फिट करने के लिए फ्रेम का आकार बदलने का फैसला करता है। आप क्या उम्मीद करेंगे नहीं। jsFiddle पर

उदाहरण कोड:
http://jsfiddle.net/R3PKB/2/

अपने iOS डिवाइस पर इसे आजमाएं:
http://jsfiddle.net/R3PKB/2/embedded/result

HTML:

<div class="frame_holder"> 
    <iframe class="my_frame"> 
    // The content 
    </iframe> 
</div> 

सीएसएस:

body { 
    position: relative; 
    background: #f0f0f0; 
} 

.frame_holder { 
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    left: 50px; 
    right: 50px; 
    background: #ffffff; 
} 

.my_frame { 
    width: 100%; 
    height: 100%; 
    border: 1px solid #e0e0e0; 
} 

Answer 1

आप overflow: auto; और -webkit-overflow-scrolling:touch; के साथ एक रैपिंग div जोड़कर इसे काम कर सकते हैं। http://jsfiddle.net/R3PKB/7/

पर इसलिए यह एक बग, iOS 4. के बाद से मैं अधिक जानकारी पाया है पिछले प्रश्न के अनुसार:: https://stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) content cropping issue

Answer 2

यह एक पुरानी सवाल है, लेकिन क्योंकि यह पहले आता है यहाँ यह के साथ अपने उदाहरण है गूगल पर और इस मुद्दे पर मौजूद है आजकल iOS उपकरणों, मुझे लगता है कि मैं इस पृष्ठ पर पाया एक बेहतर ठीक repost: How to get an IFrame to be responsive in iOS Safari?

मूल रूप से, अगर आप पुस्तक के साथ एक iframe है (चलो एक चहचहाना विजेट कहना), उपरोक्त समाधान बहुत अच्छी तरह से काम नहीं करेगा क्योंकि यह माता-पिता को स्क्रॉल करने योग्य बनाता है। मेरे लिए काम करने वाला फिक्स height: 100% को height: 1px; min-height: 100%; के साथ बदल रहा है।

Answer 3

height: 1px; min-height: 100%; का उपयोग करके मेरे लिए काम नहीं किया, हालांकि मुझे स्क्रॉलिंग तत्व की आवश्यकता नहीं थी। मुझे इसके बजाय आसपास के div पर overflow:auto; का उपयोग करना पड़ा। ध्यान दें कि यह विधि निराश है क्योंकि इसमें अनपेक्षित परिणाम हो सकते हैं, लेकिन मैंने एंड्रॉइड/आईओएस और डेस्कटॉप ब्राउज़र पर परीक्षण किया और अभी तक कोई समस्या नहीं मिली। उंगलियों पार किया।

यह कुछ iOS iframe बारीकियों पर एंडी Shora से एक अच्छा पोस्ट है: http://andyshora.com/iframes-responsive-web-apps-tips.html

Answer 4

आईओएस सफारी एक अलग मूल से अपने iframe सामग्री अपेक्षा से प्रदर्शित कर रहा है (अर्थात यह कुछ पिक्सल से अधिक स्थानांतरित कर दिया है), जोड़ने का प्रयास करें Iframe के लिए एक विशेषता के रूप में scrolling="no"। इसे स्वचालित रूप से अपनी सामग्री को फ़िट करने से रोकना चाहिए।

अधिक here.