dimensioni iframe con CSS su iOS

C'è un iframe, che in pratica ha più contenuto di quello che si adatta al frame. Il dimensionamento del frame si basa sulle dimensioni dello schermo del browser e consente lo scorrimento dell'overflow, che funziona perfettamente su tutti i browser, ad eccezione di iOS. Su iOS, Safari decide di ridimensionare la cornice per adattarla al contenuto. Non è quello che ti aspetteresti.dimensioni iframe con CSS su iOS

codice di esempio a jsFiddle:
http://jsfiddle.net/R3PKB/2/

Prova ora sui vostri dispositivi iOS:
http://jsfiddle.net/R3PKB/2/embedded/result

Il codice HTML:

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

Il CSS:

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; 
}

fonte

2013-06-05 Guido Bouman

Risparmi da parte mia per la tua chiara analisi di questo problema. – Garavani

È possibile farlo funzionare aggiungendo un div wrapping con overflow: auto; e -webkit-overflow-scrolling:touch;. Ecco il tuo esempio con esso: http://jsfiddle.net/R3PKB/7/

Secondo domande precedenti sul quindi è un errore dal momento che iOS 4. Ho trovato maggiori informazioni qui: https://stackoverflow.com/a/6721310/1047398 iframe on iOS (iPad) content cropping issue

fonte

2013-06-05 12:26:04 nvreez

Wow! Questa è sicuramente la soluzione più vicina che ho visto fino ad oggi. Ma l'implementazione è un po 'più complicata e non consente all'iframe di essere più grande della dimensione desiderata. –

Puoi spiegare di più cosa intendi e come possiamo aiutarti di più? Qual è la dimensione desiderata, la schermatura con imbottitura 50px? (come quello che stai usando nell'esempio) – nvreez

Contrassegnato come risposta perché non c'è altra soluzione a causa della funzionalità di bug/sicurezza in iOS. –

Questa è una vecchia questione, ma dal momento che viene prima su google e la questione esiste al giorno d'oggi i dispositivi iOS, ho ripubblicare una correzione migliore che ho trovato in questa pagina: How to get an IFrame to be responsive in iOS Safari?

in sostanza, se si dispone di un iframe con scorrimento (diciamo che un widget di Twitter), la soluzione sopra non funzionerà molto bene perché rende il genitore scorrevole. La correzione che ha funzionato per me sta sostituendo height: 100% con height: 1px; min-height: 100%;.

fonte

2015-03-17 16:28:54

utilizzando height: 1px; min-height: 100%; non ha funzionato per me, anche se non avevo bisogno di un elemento di scorrimento. Ho dovuto usare il overflow:auto; su un div circostante. Si noti che questo metodo è sconsigliato in quanto potrebbe avere conseguenze indesiderate, ma ho provato su Android/iOS e browser desktop e non ho ancora trovato alcun problema. dita incrociate.

Questo è un bel post di Andy Shora su alcuni iOS iframe sfumature: http://andyshora.com/iframes-responsive-web-apps-tips.html

fonte

2015-07-09 18:55:47 Chrispy

Se iOS Safari visualizza la contenuti iframe da una diversa origine del previsto (cioè è spostato sopra da alcuni pixel), prova ad aggiungere scrolling="no" come attributo all'iframe. Questo dovrebbe impedirgli di adattare automaticamente il suo contenuto.

Altro here.

fonte

2016-02-17 20:34:27

Dopo 2 ore di ricerca di una buona soluzione .. questo ha risolto il mio problema! Grazie! – udidu

risposta

Problemi correlati