Posso modificare il meta tag della vista in Safari mobile al volo?

Ho un’app ajax creata per Safari mobile che ha bisogno di visualizzare diversi tipi di contenuti. Alcuni contenuti che ho bisogno di user-scalable = 1 altro contenuto ho bisogno di user-scalable = 0. C’è un modo per aggiornarlo al volo senza aggiornare la pagina?

 

Mi rendo conto che è un po ‘vecchio, ma, si, si può fare. Alcuni javascript per iniziare:

 viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'); 

Cambia semplicemente le parti che ti servono e Mobile Safari rispetterà le nuove impostazioni.

Aggiornare:

Se non hai già il tag meta viewport nel sorgente, puoi aggiungerlo direttamente con qualcosa del genere:

 var metaTag=document.createElement('meta'); metaTag.name = "viewport" metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" document.getElementsByTagName('head')[0].appendChild(metaTag); 

O se stai usando jQuery:

 $('head').append(''); 

nel tuo

  

da qualche parte nel tuo javascript

 document.getElementById("viewport").setAttribute("content", "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;"); 

… ma buona fortuna con il tweaking per il tuo dispositivo, giocherellando per ore … e io ancora non ci sono!

fonte

Questo è stato risolto per la maggior parte, ma io espanderò …

Passo 1

Il mio objective era abilitare lo zoom in determinati momentjs e disabilitarlo in altri.

 // enable pinch zoom var $viewport = $('head meta[name="viewport"]'); $viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4'); // ...later... // disable pinch zoom $viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'); 

Passo 2

Il tag viewport si aggiornava, ma lo zoom pizzico era ancora attivo !! Ho dovuto trovare un modo per ottenere la pagina per raccogliere le modifiche …

È una soluzione di hacking, ma l’opacità del corpo è stata la giustapposizione. Sono sicuro che ci sono altri modi per farlo, ma ecco cosa ha funzionato per me.

 // after updating viewport tag, force the page to pick up changes document.body.style.opacity = .9999; setTimeout(function(){ document.body.style.opacity = 1; }, 1); 

Passaggio 3

Il mio problema è stato per lo più risolto a questo punto, ma non del tutto. Avevo bisogno di conoscere il livello di zoom corrente della pagina in modo da poter ridimensionare alcuni elementi per adattarli alla pagina (pensate ai marcatori di mappa).

 // check zoom level during user interaction, or on animation frame var currentZoom = $document.width() / window.innerWidth; 

Spero che questo aiuti qualcuno. Ho passato diverse ore a sbattere il mio mouse prima di trovare una soluzione.