Ho un'app ajax creata per Safari mobile che deve 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?Posso modificare il meta tag della vista in Safari mobile al volo?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Mi rendo conto che questo è un po 'vecchio, ma, sì, 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');
Basta modificare le parti necessarie e Mobile Safari rispetterà le nuove impostazioni.
Aggiornamento:
Se non si dispone già di tag viewport meta nella fonte, è possibile aggiungere direttamente con qualcosa di simile:
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);
Oppure, se si sta utilizzando jQuery:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');
nel vostro <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />
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 tweaking per il vostro dispositivo, armeggiando per ore ... e sto ancora non c'è!
Questo è stato risposto per la maggior parte, ma si espanderà ...
Fase 1
Il mio obiettivo era quello di consentire lo zoom in certi momenti, e disattivarla agli 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');
Fase 2
Il tag viewport sarebbe aggiornare, ma pinch zoom era ancora attivo !! Ho dovuto trovare un modo per ottenere la pagina per raccogliere le modifiche ...
Si tratta di 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);
Fase 3
Il mio problema è stato risolto in gran parte, 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.
Questo mi ha salvato la vita, ma ho un piccolo problema: supponendo che tu mostri un'immagine in un div overlay al 100% e lo zoom su un dispositivo mobile, esegui lo zoom utilizzando l'implementazione dello zoom del browser nativo che di solito ridimensiona semplicemente la area visibile senza alcun re-rendering del file originale. Dall'altro lato, se rimuovo "width = device-width" per lo stato di zoom disabilitato, rende l'immagine fine mentre si ingrandisce, ma perdo la mia ultima posizione di pagina quando il div 100% è chiuso ... –
Bello!Sfortunatamente, non riesco a farlo funzionare. La mia situazione è un po 'diversa: sto lavorando con un sito che ha una larghezza di 980 px. Il contenuto va dritto al limite del design, quindi su un iPad, sembra imbarazzante. Ho pensato di impostare il viewport su una larghezza di 1020px per consentire un margine di 20px su entrambi i lati ... ma senza fortuna: 'viewport = document.querySelector (" meta [nome = visualizzazione] "); viewport.setAttribute ('content', 'width = 1020'); ' (solo per qualche contesto: lo sto inserendo in un'istanza Drupal in qualche modo bloccata ... quindi non ho accesso diretto al area della testa e necessità di usare Javascript) – Sam
Borbottare brontolii ... Credo di sapere perché questo non funziona per me. Lo snippet sopra riportato riscriverebbe il valore della larghezza della meta viewport. Quel meta non esiste ancora ... non può cambiarlo se non c'è, giusto? In che modo posso aggiungere quel meta con Javascript? (Accidenti a questa istanza Drupal bloccata! Penso di essere fregato!) – Sam
Questo dovrebbe essere abbastanza facile. Basta scriverlo direttamente. Se stai usando jQuery sarebbe qualcosa del genere: '$ ('head'). Append (' ');' o, senza jQuery: 'document.getElementsByTagName (' head ') [0] .appendChild (...);' – markquezada