web-dev-qa-db-fra.com

Puis-je changer la méta-tag viewport dans un safari mobile à la volée?

J'ai une application AJAX construite pour le navigateur Safari mobile qui doit afficher différents types de contenu.

Pour certains contenus, j'ai besoin de user-scalable=1 et pour les autres, il me faut user-scalable=0.

Est-il possible de modifier la valeur de l'attribut content sans actualiser la page?

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

Je réalise que c'est un peu vieux, mais oui, cela peut être fait. Quelques javascript pour vous aider à démarrer:

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

Il suffit de changer les pièces dont vous avez besoin et Mobile Safari respectera les nouveaux paramètres.

Mise à jour:

Si vous n'avez pas déjà la balise meta viewport dans la source, vous pouvez l'ajouter directement avec quelque chose comme:

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

Ou si vous utilisez jQuery:

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

dans votre <head>

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

quelque part dans votre javascript

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

... mais bonne chance pour le peaufiner pour votre appareil, tripoter pendant des heures ... et je ne suis toujours pas là!

source

7
sonjz

Cela a été répondu pour la plupart, mais je vais développer ...

étape 1

Mon objectif était d'activer le zoom à certains moments et de le désactiver à d'autres moments.

// 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');

étape 2

La balise viewport se mettrait à jour, mais le zoom par pincement était toujours actif !! Je devais trouver un moyen d'obtenir la page pour prendre en compte les modifications ...

C'est une solution de hack, mais opter pour l'opacité du corps a fait l'affaire. Je suis sûr qu'il existe d'autres moyens d'y parvenir, mais voici ce qui a fonctionné pour moi.

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

étape

Mon problème était en grande partie résolu à ce stade, mais pas tout à fait. J'avais besoin de connaître le niveau de zoom actuel de la page pour pouvoir redimensionner certains éléments afin de les adapter à la page (pensez aux marqueurs de carte).

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

J'espère que cela aide quelqu'un. J'ai passé plusieurs heures à frapper ma souris avant de trouver une solution.

4
posit labs