Consentire lo zoom all'interno di iFrame, ma non sulla pagina in iOS

Question

ho una semplice pagina con

<meta name="viewport" id="extViewportMeta" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

su di esso, con tutto ciò che di dimensioni ben per visualizzare su un iPhone.

Ma quando inserisco un iframe in quella pagina, tutto all'interno di iFrame non è zoomabile e si adatta alle dimensioni della pagina padre.

Come posso consentire lo zoom all'interno dell'iframe solo, senza interferire con il resto della mia pagina?

Answer 1

Quello che stai richiedendo non è purtroppo possibile.

Innanzitutto, nel meta tag "viewport", il tuo attributo "contenuto" specifica che l'utente del tuo sito web NON può ingrandire affatto. Questo è ciò che dettano il 'scalabile dall'utente = no'.

Inoltre, il vostro massima scala e minimo di scala è impostato su 1, quindi, anche se si rimuove il 'user-scalabile = no', lo zoom avrebbero disattivato dal fatto che non v'è alcun intervallo di scala per l'utente per eseguire lo zoom all'interno.

Quindi per abilitare lo zoom per l'utente sarà necessario rimuovere l'utente scalabile = no e impostare diversi valori di scala min e max.

Vedere questo link per capire meglio le impostazioni per la 'finestra' meta tag:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

In secondo luogo, dal momento che il 'viewport' meta tag è impostato sulla pagina 'genitore', si applicano queste impostazioni a qualsiasi cosa all'interno di quella pagina, vale a dire anche l'iframe. Se l'iframe ha un diverso meta 'viewport' tag che specifica le diverse impostazioni non ha importanza dal momento che vive all'interno e si attiene alle impostazioni del suo genitore.

Answer 2

Questo non è possibile in quanto iOS non consente lo zoom - è sufficiente scorrere l'iFrame. È un sito esterno di tua proprietà? Se è così, cambia il codice CSS e aggiungilo alla viewport come nella tua domanda in alto.
In alternativa, è possibile caricare i dati con PHP. Troverai sicuramente una soluzione per il tuo problema - in caso contrario, sentiti libero di porre domande di follow-up.

Answer 3

Questo è possibile tramite jQuery. Associare gli eventi di zoom e panning a non fare nulla durante lo zoom e il panning al di fuori dei div che consentono lo zoom e il panning. Quindi, per le div a cui vuoi consentire lo zoom e il panning, puoi usare plugin come Panzoom che usano "trasformazioni CSS3 e funzioni matriciali" per consentire lo zoom e il panning.