Posso modificare al volo il meta tag viewport in Mobile Safari?

Ho un'app AJAX creata per il browser Safari mobile che deve visualizzare diversi tipi di contenuto.

Per alcuni contenuti ho bisogno user-scalable=1e per altri ho bisogno user-scalable=0.

C'è un modo per modificare il valore dell'attributo content senza aggiornare la pagina?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

javascript mobile-safari viewport

— Pepe
fonte

Risposte:

148

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 cambiare le parti di cui hai bisogno e Mobile Safari rispetterà le nuove impostazioni.

Aggiornare:

Se non hai già il meta tag viewport nella 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('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

— markquezada
fonte

Bello! Sfortunatamente, non riesco a farlo funzionare. La mia situazione è un po 'diversa: sto lavorando con un sito che ha una larghezza di 980px. Il contenuto arriva fino al bordo del design, quindi su un iPad sembra strano. 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[name=viewport]"); viewport.setAttribute('content', 'width=1020'); (Solo per un po 'di contesto: lo metto in un'istanza di Drupal un po' bloccata ... quindi non ho accesso diretto all'area della testa e devo usare Javascript)

— Sam

Questo dovrebbe essere abbastanza facile. Scrivilo direttamente. Se stai usando jQuery sarebbe qualcosa del genere:

$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');

o, senza jQuery:document.getElementsByTagName('head')[0].appendChild( ... );

— markquezada

Per gli attributi del contenuto, l'ispettore web di Mobile Safari genera un errore sul punto e virgola. Questo sembra essere più valido:viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

— jfroom

@the_nuts Hai ragione, appendChild si aspetta un nodo, non una stringa. Aggiornato. Grazie.

— markquezada

@basZero: potresti usare l'agente utente per controllare su quale dispositivo è in esecuzione lo script prima di eseguire il codice sopra, ma in generale penso che sia una cattiva idea. Prova a generalizzare in base alle caratteristiche del dispositivo (o alle dimensioni dello schermo se necessario), non ai dispositivi effettivi. Ad esempio, è possibile rilevare se il dispositivo supporta eventi di tocco, ecc. (Ad esempio, con modernizr ). Dipende da cosa stai cercando di fare.

— markquezada

nel tuo <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 l'ottimizzazione per il tuo dispositivo, giocherellando per ore ... e ancora non ci sono!

fonte

— sonjz
fonte

Questo è stato risposto per la maggior parte, ma amplierò ...

Passo 1

Il mio obiettivo era abilitare lo zoom in determinati momenti 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 con pizzico era ancora attivo !! Ho dovuto trovare un modo per far sì che la pagina raccolga le modifiche ...

È una soluzione per hacker, ma cambiare l'opacità del corpo ha funzionato. Sono sicuro che ci sono altri modi per ottenere questo risultato, 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 l'attuale livello di zoom della pagina in modo da poter ridimensionare alcuni elementi per adattarli alla pagina (pensa agli indicatori 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 battere il mouse prima di trovare una soluzione.

— posit labs
fonte

Questo mi ha salvato la vita, ma ho un piccolo problema con esso: supponendo che tu stia visualizzando un'immagine in un div in sovrimpressione al 100% e ingrandendola su un dispositivo mobile, ingrandirai usando l'implementazione dello zoom del browser nativo che di solito ridimensiona semplicemente il visibile area senza alcun rendering del file originale. Dall'altro lato, se rimuovo "width = device-width" per lo stato di zoom disattivato, l'immagine viene visualizzata correttamente durante lo zoom ma perdo la posizione dell'ultima pagina quando il div 100% è chiuso ...

— Stefan Müller